概述：

在我的博客中，有一篇相关的文章，这段时间，有很多人问我求源码，只是时间过去已长，源代码已找不到，乘着这个9.3放假，又重新实现了下，并相关代码做了优化，在此贴出来，方便大家使用。

相关文章地址：

http://blog.csdn.net/gisshixisheng/article/details/39577817

实现后效果：

为直观期间，先贴出来我做的效果

列表展示和地图展示以及联动

显示信息

实现思路：

1、列表与地图的互动

鼠标经过列表时，修改列表图标，并根据列表返回的值在地图上绘蓝色的marker；鼠标移出，修改列表图标为红色，清空地图marker图层。

关键代码：

  1. title.on("mouseover",function(){
  2. var attr = $(this).data("attr");
  3. $("#icon"+attr.id).css("background","url('images/blue.png')");
  4. var pt=new Point(attr.x,attr.y,{"wkid":4326});
  5. var pms = new esri.symbol.PictureMarkerSymbol("images/blue.png",24,26)
  6. var gImg = new Graphic(pt,pms);
  7. gLyrHover.add(gImg);
  8. });
  9. title.on("mouseout",function(){
  10. var attr = $(this).data("attr");
  11. $("#icon"+attr.id).css("background","url('images/red.png')");
  12. gLyrHover.clear();
  13. });
 

2、地图与列表的互动

鼠标经过地图红色的marker时，修改对应列表图标，并将红色 marker的图片换成蓝色的；鼠标移出，修改对应列表图标，并修改marker为红色。

关键代码：

  1. gLyr.on("mouse-over",function(e){
  2. map.setMapCursor("pointer");
  3. var sms = e.graphic.symbol;
  4. sms.url = "images/blue.png";
  5. gLyr.redraw();
  6. $("#icon"+e.graphic.attributes.id).css("background","url('images/blue.png')");
  7. });
  8. gLyr.on("mouse-out",function(e){
  9. map.setMapCursor("default");
  10. var sms = e.graphic.symbol;
  11. sms.url = "images/red.png";
  12. gLyr.redraw();
  13. $("#icon"+e.graphic.attributes.id).css("background","url('images/red.png')");
  14. });

3、地图上ABCD的文字是一个单独的图层，不参与互动。

4、数据以JSON形式存在。

  1. var data = [
  2. {
  3. "id":"A","name":"拉萨", "x":91.162998, "y":29.71042,
  4. "desc":"拉萨是中国西藏自治区的首府，西藏的政治、经济、文化和宗教中心，也是藏传佛教圣地。"
  5. },
  6. {
  7. "id":"B", "name":"西宁","x":101.797303,"y":36.593642,
  8. "desc":"西宁是青海省的省会，古称西平郡、青唐城，取”西陲安宁“之意，是整个青藏高原最大的城市。"
  9. },
  10. {
  11. "id":"C","name":"兰州","x":103.584297,"y":36.119086,
  12. "desc":"兰州，甘肃省省会，西北地区重要的工业基地和综合交通枢纽，西部地区重要的中心城市之一，丝绸之路经济带的重要节点城市。"
  13. },
  14. {
  15. "id":"D","name":"成都","x":104.035508,"y":30.714179,
  16. "desc":"成都，简称蓉，四川省省会，1993年被国务院确定为西南地区的科技、商贸、金融中心和交通、通讯枢纽。"
  17. }
  18. ];

完整代码：

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    5. <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    6. <title></title>
    7. <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css">
    8. <style type="text/css">
    9. html, body, #map {
    10. height: 100%;
    11. margin: 0;
    12. padding: 0;
    13. font-size: 62.5%;
    14. font-family:"微软雅黑";
    15. }
    16. .search-box{
    17. z-index: 99;
    18. background: #fff;
    19. border: 1px solid #888888;
    20. border-radius: 5px;
    21. width: 220px;
    22. max-height:600px;
    23. overflow-y: auto;
    24. position: absolute;
    25. top: 120px;
    26. left: 10px;
    27. }
    28. .search-box-title{
    29. padding: 6px 10px;
    30. text-align: left;
    31. font-size: 13px;
    32. font-weight: bold;
    33. color: #f2f2f2;
    34. background: #85b0db;
    35. }
    36. .search-box-result{
    37. list-style: none;
    38. margin-left:-40px;
    39. margin-top: 0px;
    40. }
    41. .search-box-result-item{
    42. border-bottom: 1px solid #eeeeee;
    43. padding: 5px 8px;
    44. }
    45. .search-name{
    46. float: right;
    47. font-weight: bold;
    48. font-size: 13px;
    49. margin-top: 3px;
    50. margin-right: 10px;
    51. }
    52. .search-name-title{
    53. background: #f2f2f2;
    54. }
    55. .search-name-title:hover{
    56. cursor: pointer;
    57. }
    58. .search-detail{
    59. border-top:  1px dashed #eeeeee;
    60. margin-top: 3px;
    61. padding: 3px 5px;
    62. line-height: 18px;
    63. }
    64. .search-icon{
    65. background: url("images/red.png");
    66. width: 24px;
    67. height: 26px;
    68. background-repeat: no-repeat;
    69. }
    70. .search-text{
    71. color: #ffffff;
    72. font-weight: bold;
    73. font-size: 16px;
    74. margin-left:7px ;
    75. }
    76. .detail{
    77. color: #85b0db;
    78. font-weight: bold;
    79. text-align: right;
    80. }
    81. .detail:hover{
    82. cursor: pointer;
    83. }
    84. </style>
    85. <script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>
    86. <script src="jquery-1.8.3.js"></script>
    87. <script type="text/javascript">
    88. var map;
    89. var data = [
    90. {
    91. "id":"A","name":"拉萨", "x":91.162998, "y":29.71042,
    92. "desc":"拉萨是中国西藏自治区的首府，西藏的政治、经济、文化和宗教中心，也是藏传佛教圣地。"
    93. },
    94. {
    95. "id":"B", "name":"西宁","x":101.797303,"y":36.593642,
    96. "desc":"西宁是青海省的省会，古称西平郡、青唐城，取”西陲安宁“之意，是整个青藏高原最大的城市。"
    97. },
    98. {
    99. "id":"C","name":"兰州","x":103.584297,"y":36.119086,
    100. "desc":"兰州，甘肃省省会，西北地区重要的工业基地和综合交通枢纽，西部地区重要的中心城市之一，丝绸之路经济带的重要节点城市。"
    101. },
    102. {
    103. "id":"D","name":"成都","x":104.035508,"y":30.714179,
    104. "desc":"成都，简称蓉，四川省省会，1993年被国务院确定为西南地区的科技、商贸、金融中心和交通、通讯枢纽。"
    105. }
    106. ];
    107. require([
    108. "esri/map",
    109. "esri/layers/ArcGISTiledMapServiceLayer",
    110. "esri/geometry/Point",
    111. "esri/layers/GraphicsLayer",
    112. "esri/graphic",
    113. "dojo/_base/Color",
    114. "dojo/domReady!"],
    115. function(Map,
    116. Tiled,
    117. Point,
    118. GraphicsLayer,
    119. Graphic,
    120. Color)
    121. {
    122. map = new Map("map",{logo:false});
    123. var tiled = new Tiled("http://localhost:6080/arcgis/rest/services/china/MapServer",{"id":"tiled"});
    124. map.addLayer(tiled);
    125. var mapCenter = new Point(103.847, 36.0473, {"wkid":4326});
    126. map.centerAndZoom(mapCenter,0);
    127. var gLyr = new GraphicsLayer({"id":"gLyr"});
    128. map.addLayer(gLyr);
    129. var gLyrHover = new GraphicsLayer({"id":"gLyrHover"});
    130. map.addLayer(gLyrHover);
    131. var gLyrLbl = new GraphicsLayer({"id":"gLyrLbl"});
    132. map.addLayer(gLyrLbl);
    133. map.on("load",function(){
    134. $("#search").show();
    135. for(var i=0;i<data.length;i++){
    136. var li = $("<li />").addClass("search-box-result-item").appendTo($("#result"));
    137. var name = $("<div />").addClass("search-name").html(data[i].name);
    138. var icon = $("<div />").addClass("search-icon")
    139. .attr("id","icon"+data[i].id)
    140. .append("<div class='search-text'>"+data[i].id+"</div>");
    141. var title = $("<div />").addClass("search-name-title")
    142. .append(name).append(icon).appendTo(li)
    143. .data("attr",data[i]);
    144. var desc = $("<div />").addClass("search-detail").html(data[i].desc).appendTo(li);
    145. var more = $("<div />").addClass("detail").appendTo(li).html(">>详细");
    146. title.on("mouseover",function(){
    147. var attr = $(this).data("attr");
    148. $("#icon"+attr.id).css("background","url('images/blue.png')");
    149. var pt=new Point(attr.x,attr.y,{"wkid":4326});
    150. var pms = new esri.symbol.PictureMarkerSymbol("images/blue.png",24,26)
    151. var gImg = new Graphic(pt,pms);
    152. gLyrHover.add(gImg);
    153. });
    154. title.on("mouseout",function(){
    155. var attr = $(this).data("attr");
    156. $("#icon"+attr.id).css("background","url('images/red.png')");
    157. gLyrHover.clear();
    158. });
    159. title.on("click",function(){
    160. var attr = $(this).data("attr");
    161. showCity(attr);
    162. });
    163. var pt=new Point(data[i].x,data[i].y,{"wkid":4326});
    164. var pms = new esri.symbol.PictureMarkerSymbol("images/red.png",24,26)
    165. var gImg = new Graphic(pt,pms,data[i]);
    166. gLyr.add(gImg);
    167. var font  = new esri.symbol.Font();
    168. font.setSize("10pt");
    169. font.setFamily("微软雅黑");
    170. var text = new esri.symbol.TextSymbol(data[i].id);
    171. text.setOffset(0,-2);
    172. text.setFont(font);
    173. text.setColor(new dojo.Color([255,255,255,100]));
    174. var gLbl = new esri.Graphic(pt,text,data[i]);
    175. gLyrLbl.add(gLbl);
    176. }
    177. gLyr.on("mouse-over",function(e){
    178. map.setMapCursor("pointer");
    179. var sms = e.graphic.symbol;
    180. sms.url = "images/blue.png";
    181. gLyr.redraw();
    182. $("#icon"+e.graphic.attributes.id).css("background","url('images/blue.png')");
    183. });
    184. gLyr.on("mouse-out",function(e){
    185. map.setMapCursor("default");
    186. var sms = e.graphic.symbol;
    187. sms.url = "images/red.png";
    188. gLyr.redraw();
    189. $("#icon"+e.graphic.attributes.id).css("background","url('images/red.png')");
    190. });
    191. gLyr.on("click",function(e){
    192. var attr = e.graphic.attributes;
    193. showCity(attr);
    194. });
    195. });
    196. function showCity(attr){
    197. var pt=new Point(attr.x,attr.y,{"wkid":4326});
    198. map.infoWindow.setTitle(attr.name);
    199. map.infoWindow.setContent(attr.desc);
    200. map.infoWindow.resize(200,80);
    201. map.infoWindow.show(pt);
    202. map.centerAndZoom(pt,0);
    203. }
    204. });
    205. </script>
    206. </head>
    207. <body>
    208. <div id="search" class="search-box" style="display: none;">
    209. <div class="search-box-title">查询结果</div>
    210. <ul class="search-box-result" id="result">
    211. </ul>
    212. </div>
    213. <div id="map">
    214. </div>
    215. </body>
    216. </html>
 

（转）Arcgis for javascript实现百度地图ABCD marker的效果的更多相关文章

  1. 关于ArcGis for javascript整合百度地图 天地图 高德地图进行搜索

    1.ArcGis for javascript整合百度地图搜索 1.1.首先引入百度地图的api <!-- 引入百度地图API --> <script type="text ...

  2. javascript使用百度地图api和html5特性获取浏览器位置

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>&l ...

  3. JavaScript对接百度地图api实现地图标点功能

    粗略的做了个地图标点功能 首先,去百度注册开发者账号,然后进入到百度地图开放平台 进入到控制台, 创建浏览器端应用,给个安全域名 然后去开发者文档JavaScript里面找地图展示文档,直接怼上去就行 ...

  4. ArcMap和ArcGIS Pro加载百度地图

    前面发布了两篇我用ArcBruTile开发用于ArcMap加载百度地图的插件ArcBruTileBaidu,放在网上后评论和反响还不错,还有两位大学同学通过百度搜索居然搜到我本人!文章和技术介绍也被网 ...

  5. JavaScript调用百度地图

    在网站开发过程中,经常会调用到地图,百度地图提供Web开发.Android开发.iOS开发API及SDK,百度地图JavaScript API可帮助您在网站中构建功能丰富.交互性强的地图应用,本篇博客 ...

  6. 百度地图 判断marker是否在多边形内

    昨天画了圆形,判marker是否存在圆形内.今天来画多边形,判断marker在多边形内. 需要引入一个js      <script type="text/javascript&quo ...

  7. 百度地图自定义Marker

    最近写了百度地图的Demo,所以总结下遇到的问题: 1.首先在百度地图中创建应用时用到 发布版SHA1是在Preferences下的Android下的Build中;2.在使用百度地图时,先要创建一个A ...

  8. 百度地图JavascriptApi Marker平滑移动及车头指向行径方向

    相信只要是使用百度地图做实时定位服务的朋友都会遇到这个问题,在对坐标位置进行覆盖物展示的时候,会出现由于获取坐标数据时间或者两个坐标点相距过远,导致在视觉上看Marker移动就像"僵尸跳&q ...

  9. ArcGIS JS 学习笔记1 用ArcGIS JS 实现仿百度地图的距离量测和面积量测

    一.开篇 在博客注册了三年,今天才决定写第一篇博客,警告自己不要懒!!! 二.关于ArcGIS JS 版本选择 在写这篇博客时ArcGIS JS 4.0正式版已经发布.它和3.x版本的不同是,Map不 ...

随机推荐

  1. vijos- P1383盗窃-黑珍珠 (python + 代码优化)

    P1383盗窃-黑珍珠 Accepted 标签:怪盗基德 VS OIBH[显示标签] 背景 怪盗基德 VS OIBH 第二话 描写叙述 今次怪盗基德再次对阵OIBH,目标是Black Star!基德已 ...

  2. 『干货』分享你最喜欢的技巧和提示(Xcode,objective-c,swift,c...等等)

    亲爱的读者们,你们好 !年底将近,分享从过去一年你最喜欢的技巧和建议作为礼物送给新手们.提交你的最喜欢的迅速或objc琐事,实用的提示,意外的发现,实用的解决方法,没用的迷恋,或不论什么其它你认为今年 ...

  3. 「五」创建一个带 tomcat 服务的基础镜像（修订版）

    Tomcat Tomcat 简单介绍 Tomcat server是一个免费的开放源码的Web 应用server,属于轻量级应用server.在中小型系统和并发訪问用户不是非常多的场合下被普遍使用,是开 ...

  4. ios block 内存管理时使用注意

    XMGStudent *stu = [[XMGStudent alloc] init]; __weak XMGStudent *weakStu = stu; stu.block = ^{ NSLog( ...

  5. LeetCode 266. Palindrome Permutation （回文排列）$

    Given a string, determine if a permutation of the string could form a palindrome. For example," ...

  6. js 实现replaceAll

    须要替换到字符串里面的多个双引號,不废话,直接上代码: var filePath = '"d:/img/1.jgp"'; filePath = filePath.replace(n ...

  7. TTS-零基础入门-10分钟教你做一个语音功能

    在本片博客正式開始之前,大家先跟我做一个简单的好玩的 小语音. 新建一个文本文档,然后再文档里输入这样 一句话  CreateObject("SAPI.SpVoice").Spea ...

  8. python 数据描述字符串转整数

    q3 = int(float(q3.replace('万', '')) * 10000)

  9. oc67--NSString1

    // // main.m // NSString基本概念 // Foundation框架,苹果有80多个框架,Foundation有125个头文件. #import <Foundation/Fo ...

  10. Spark 机器学习 ---Word2Vec

    package Spark_MLlib import org.apache.spark.ml.feature.Word2Vec import org.apache.spark.sql.SparkSes ...