先给大家展示实现后效果：
为直观期间，先贴出来我做的效果
列表展示和地图展示以及联动
显示信息
实现思路：
1、列表与地图的互动
鼠标经过列表时，修改列表图标，并根据列表返回的值在地图上绘蓝色的marker；鼠标移出，修改列表图标为红色，清空地图marker图层。
关键代码：
title.on(mouseover,function(){ var attr = $(this).data(attr); $(#icon+attr.id).css(background,url('images/blue.png')); var pt=new point(attr.x,attr.y,{wkid:4326}); var pms = new esri.symbol.picturemarkersymbol(images/blue.png,24,26) var gimg = new graphic(pt,pms); glyrhover.add(gimg); }); title.on(mouseout,function(){ var attr = $(this).data(attr); $(#icon+attr.id).css(background,url('images/red.png')); glyrhover.clear(); });
2、地图与列表的互动
鼠标经过地图红色的marker时，修改对应列表图标，并将红色 marker的图片换成蓝色的；鼠标移出，修改对应列表图标，并修改marker为红色。
关键代码：
glyr.on(mouse-over,function(e){ map.setmapcursor(pointer); var sms = e.graphic.symbol; sms.url = images/blue.png; glyr.redraw(); $(#icon+e.graphic.attributes.id).css(background,url('images/blue.png')); }); glyr.on(mouse-out,function(e){ map.setmapcursor(default); var sms = e.graphic.symbol; sms.url = images/red.png; glyr.redraw(); $(#icon+e.graphic.attributes.id).css(background,url('images/red.png')); });
3、地图上abcd的文字是一个单独的图层，不参与互动。
4、数据以json形式存在。
var data = [ { id:a,name:拉萨, x:91.162998, y:29.71042, desc:拉萨是中国西藏自治区的首府，西藏的政治、经济、文化和宗教中心，也是藏传佛教圣地。 }, { id:b, name:西宁,x:101.797303,y:36.593642, desc:西宁是青海省的省会，古称西平郡、青唐城，取”西陲安宁“之意，是整个青藏高原最大的城市。 }, { id:c,name:兰州,x:103.584297,y:36.119086, desc:兰州，甘肃省省会，西北地区重要的工业基地和综合交通枢纽，西部地区重要的中心城市之一，丝绸之路经济带的重要节点城市。 }, { id:d,name:成都,x:104.035508,y:30.714179, desc:成都，简称蓉，四川省省会，1993年被国务院确定为西南地区的科技、商贸、金融中心和交通、通讯枢纽。 } ];
完整代码：
查询结果

以上内容就是脚本之家小编给大家分享的基于arcgis for javascript实现百度地图abcd marker的效果，希望大家喜欢。