概述：

在我的博客中，有一篇相关的文章，这段时间，有很多人问我求源码，只是时间过去已长，源代码已找不到，乘着这个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. Spring——ClassPathXmlApplicationContext（配置文件路径解析 1）

    ClassPathXmlApplicationContext     在我的 BeanFactory 容器文章中主要提及了 BeanFactory 容器初始化(Spring 配置文件加载(还没解析)) ...

  2. jconsole远程连接 jmx配置注意事项

    由于在测试程序时需要收集程序运行时的内存,CPU等消耗情况.选择了jconsole这个jdk自带工具来观察.为了不影响程序运行状态,用远程连接的方式来具体观察. 首先,程序是放在ubutun系统服务器 ...

  3. - > 贪心基础入门讲解一——完美字符串

    约翰认为字符串的完美度等于它里面所有字母的完美度之和.每个字母的完美度可以由你来分配,不同字母的完美度不同,分别对应一个1-26之间的整数. 约翰不在乎字母大小写.(也就是说字母F和f)的完美度相同. ...

  4. ZooKeeper实现配置中心的实例（原生API实现）（转）

    说明:要实现配置中心的例子,可以选择的SDK有很多,原生自带的SDK也是不错的选择.比如使用I0Itec,Spring Boot集成等. 大型应用通常会按业务拆分成一个个业务子系统,这些大大小小的子应 ...

  5. mybatis中jdbcType的作用和是否必须

    1. mybatis中 jdbcType 时间类型 当jdbcType = DATE 时, 只传入了 年月日 jdbcType = TIMESTAMP ,  年月日+ 时分秒 2. jdbcType ...

  6. 《WF in 24 Hours》读书笔记 - Hour 2(1) - 第一个Workflow程序

    创建第一个Workflow项目 1. 创建Workflow项目 – 选择Workflow Console Application 2. 添加CodeActivity 3. 打开CodeActivity ...

  7. JavaScript使用正則表達式

    2.0 简单介绍 正則表達式是能够用来查找与给定模式匹配的文本的搜索模式.比如,在上一章中,我们在一个较长的字符串中查找子字符串Cookbook: var testValue = "This ...

  8. hdu 5078 2014鞍山现场赛 水题

    http://acm.hdu.edu.cn/showproblem.php?pid=5078 现场最水的一道题 连排序都不用,由于说了ti<ti+1 //#pragma comment(link ...

  9. 三种常见的编码：ASCII码、UTF-8编码、Unicode编码等字符占领的字节数

    ASCII码: 一个英文字母(不分大写和小写)占一个字节的空间.一个中文汉字占两个字节的空间. 一个二进制数字序列,在计算机中作为一个数字单元,一般为8位二进制数,换算为十进制. 最小值0,最大值25 ...

  10. 面向画布(Canvas)的JavaScript库

    面向画布(Canvas)的JavaScript库 总结 每个库各有特色,根据需求选择   学习要点 面向画布(Canvas)的JavaScript库 EaselJS 是一个封装了 HTML5 画布(C ...