基于Arcgis的javascript百度地图ABCD标记的实现

首先向您展示实施后的效果：

对于直觉期，先贴上我做的效果

列表显示和地图显示及链接

显示信息

实施思路：

1.列表和地图之间的交互

鼠标经过列表时，修改列表图标，画一个蓝色标记；在地图上按列表返回的值；将鼠标移出，将列表图标更改为红色，并清空地图标记图层。

密钥代码：

title.on('mouseover '，function(){ var attr=$(this)。数据(' attr ')；$('#icon' attr.id)。css('背景'，' 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)。数据(' attr ')；$('#icon' attr.id)。css('背景'，' URL '(images/red . png '))；glyrhover . clear()；});2.地图和列表之间的交互

当鼠标经过地图的红色标记时，修改对应的列表图标，将红色标记的图片改为蓝色；将鼠标移出，修改相应的列表图标，并将标记更改为红色。

密钥代码：

gLyr.on('鼠标悬停'，函数(e){ map.setMapCursor('指针')；var SMS=e . graphic . symbol；SMS . URL=' images/blue . png '；glyr . redraw()；$(' # icon ' e . graphic . attributes . id)。css('背景'，' URL '(images/blue . png '))；});gLyr.on('鼠标移出'，函数(e){ map.setMapCursor('默认')；var SMS=e . graphic . symbol；SMS . URL=' images/red . png '；glyr . redraw()；$(' # icon ' e . graphic . attributes . id)。css('背景'，' URL '(images/red . png '))；});3.地图上的ABCD文字是一个单独的图层，不参与交互。

4.数据以JSON形式存在。

Vardata=[{'id' :' a '，' name' : '拉萨'，' x' :91.162998，' y' :29.71042，' desc' : '拉萨是中国西藏自治区的首府，西藏的政治、经济和社会发展' }，{'id':'B '，' name': '西宁'，' x ' :101.797303 是我国西北地区重要的工业基地}、{'id':'D '、' name': '成都'、' x' :104.035508、' y' :30.714179、' : '成都，四川省会蓉的简称，11 ' }]； 完整代码：

！DOCTYPE html html head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 ' meta name=' viewport ' content=' initial-scale=1，maximum-scale=1，user-scale=no '/title/title link rel='样式表href=' http://localhost/ArcGIS _ js _ API/library/3.9/3.9/js/ESRI/CSS/ESRI。' CSS '样式类型=' text/CSS ' html，body，# map { height 3360 100%；保证金： 0；padd : 0；字号： 62.5%；字体系列： '微软雅黑；} .搜索框{ z-index : 99背景# fffborder: 1px固体# 88888;边界半径： 5px宽度： 220 px最大高度：600 px溢出-y:自动；绝对位置：top: 120pxleft: 10px}。搜索框标题{ padding: 6px 10px文本-左对齐：font-size : 13px字体粗细：粗体；color: # f2f2f2背景技术# 85b0db}。搜索框-结果{列表式：无；左边距：-40px；边距-top : 0px；} .搜索框结果项{边框-底部： 1px实心# eeeepadding: 5px 8px }。搜索名称{ float : right font-weight :粗体；font-size : 13px保证金-top : 3px；右边距： 10px} .搜索名称标题{ background: # f2f2f2}。搜索名称标题：悬停{光标：指针；} .搜索-详细信息{边框-顶部： 1px虚线# eeeeee保证金-top : 3px；padding: 3px 5px线高： 18px} .搜索图标{背景： URL('图像/红色。png ')；宽度： 24px高度： 26px背景-重复：不重复；} .搜索-文本{ color : # ffff字体粗细：粗体；font-size : 16px边距-左侧：7 px} .详细信息{ color : # 85 B0 dbfont-weight :粗体；文本对齐：右侧；} .detail:hover{ cursor:指针；}/style script src=' http :http://localhost/ArcGIS _ js _ API/library/3.9/3.9/init。js '/script script src=' http : jquery-1。8 .3 .js '/script脚本类型=' text/JavaScript ' var map；定义变量数据=[ { '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年被国务院确定为西南地区的科技、商贸、金融中心和交通、通讯枢纽。

' } ];需要([ 'esri/map '，' ESRI/layers/arcgisteedmaservice图层'，' esri/geometry/Point '，' esri/layers/GraphicsLayer '，' esri/graphic '，' dojo/_base/Color '，' dojo/domReady！],函数（地图、平铺、点、图形图层、图形、颜色){地图=新地图('地图，{ logo : false })；var Tiled=new Tiled(' http://localhost :6080/ArcGIS/rest/services/China/MapServer '，{ ' id ' : ' Tiled ' })；map.addLayer(平铺);var mapCenter=new Point(103.847，36.0473，{ ' wkid ' :4326 })；地图中心和缩放(地图中心，0)；var gLyr=新图形层({ ' id ' : ' gLyr ' })；地图。add layer(GLYr)；var gLyrHover=新图形层({ ' id ' : ' gLyrHover ' })；地图。add layer(gLyrHover)；var gLyrLbl=新图形层({ ' id ' : ' gLyrLbl ' })；地图。add layer(gLyrLbl)；map.on('load '，function(){ $('#search ')).show()；for(var I=0；idata.lengthi ){ var li=$('li /').addClass(')搜索框结果项')。appendo($(“# result”)；var name=$('div /').addClass(')搜索名称')。html(数据[i].姓名);var icon=$('div /').addClass(')搜索图标')。attr('id '，'图标'数据[i].id ).追加(' div class='search-text ')数据[i].id '/div ')；var title=$('div /').addClass(')搜索名称标题')。追加（名称)。追加（图标)。附录。数据(“attr”，数据[I])；var desc=$('div /').addClass('搜索详细信息').html(数据[i].desc).(李)；var more=$('div /').addClass('detail ').附录html(")详细');title.on('mouseover '，function(){ var attr=$(this).数据(“attr”)；$(“# icon”attr . id).css(“”背景，‘URL’(图片/蓝色。png ')；var pt=new Point(attr.x，attr.y，{ ' wkid ' :4326 })；新ESRI。符号。picturemarkersymbol(' images/blue。png '，24，26) var gImg=new Graphic(pt，PMS)；glyrhover。add(GImg)；});title.on('mouseout '，function(){ var attr=$(this).数据(“attr”)；$(“# icon”attr . id).css(“”背景，‘URL’(图片/红色。png ')；glyrhover。clear()；});title.on('click ')，function(){ var attr=$(this).数据(“attr”)；展示城市(attr)；});var pt=新点（数据[i].x，数据[i].y，{ ' wkid ' :4326 })；新ESRI。符号。picturemarkersymbol(' images/red。png '，24，26) var gImg=new Graphic(pt，PMS，data[I])；格里尔。add(GImg)；新ESRI。符号。font()；字体。setSize(' 10pt ')；' font.setFamily('微软雅黑');新ESRI。符号。文本符号(数据[i].id)；text.setOffset(0，-2)；text.setFont(字体);text.setColor(新道场。颜色([255,255,255,100]);var gLbl=新esri .图形(pt ),文本、数据[I])；glyrlbl。add(GLbl)；} gLyr.on('鼠标悬停，函数(e){ map.setMapCursor('指针');风险值短信=e .图形。符号；短信。URL=' images/blue。png '；格里尔。redraw()；$(' # icon ' e . graphic。属性。id ).css(“”背景，‘URL’(图片/蓝色。png ')；});' gLyr.on('鼠标移出，函数(e){ map.setMapCursor('默认');风险值短信=e .图形。符号；短信。URL=' images/red。png '；格里尔。redraw()；$(' # icon ' e . graphic。属性。id ).css(“”背景，‘URL’(图片/红色。png ')；});gLyr.on('click '，function(e){ var attr=e . graphic。属性；展示城市(attr)；});});函数显示城市(attr){ var pt=new Point(attr。x，attr.y，{ ' wkid ' :4326 })；地图。信息窗口。settitle(attr。姓名)；地图。信息窗口。setcontent(attr。desc)；map.infoWindow.resize(200，80)；地图。信息窗口。show(pt)；map.centerAndZoom(pt，0)；} });/script/head body div id=' search ' class=' search-box ' style=' display : none；' div class='搜索框-标题'查询结果/div ul class=' search-box-result ' id=' result '/ul/div div id=' map '/div/body/html以上内容就是我们小编给大家分享的基于Arcgis for javascript实现百度地图AcceleratedBusinessCollectionandDelivery（美国邮局采用的）加快收寄投递系统标记的效果，希望大家喜欢。