概述：

在我的博客中，有一篇相关的文章，这段时间，有很多人问我求源码，只是时间过去已长，源代码已找不到，乘着这个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. 29、Java并发性和多线程-非阻塞算法

    以下内容转自http://ifeve.com/non-blocking-algorithms/: 在并发上下文中,非阻塞算法是一种允许线程在阻塞其他线程的情况下访问共享状态的算法.在绝大多数项目中,在 ...

  2. 用 Arduino Uno 给 Arduino Mini（Pro）烧录程序

    用 Arduino Uno 给 Arduino Mini(Pro)烧录程序 准备 Arduino Uno Arduino Mini(Pro) 杜邦线若干 接线 首先去掉 Arduino 上的芯片ATM ...

  3. 1.4－动态路由协议OSPF①

    r2#sh ip ospf border-routers 查看ABR 修改OSPF接口优先级 r1(config)#int e 0 r1(config-if)#ip ospf priority 100 ...

  4. OCX 打包 CAB 与 JS 调用具体教程

        近期在做一个 WEB 项目.须要调用 OCX 进行连接读卡器读卡.本来并不想用 OCX 技术.由于 ActiveX 技术是微软出品.这样就导致整个系统仅仅能使用 IE 浏览器(其它浏览器能够通 ...

  5. 《Linux Device Drivers》第八章 分配内存——note

    本章主要介绍Linux内核的内存管理. kmalloc函数的内幕 不正确所获取的内存空间清零 分配的区域在物理内存中也是连续的 flags參数 <linux/slab.h> <lin ...

  6. (WIP) DPDK理论学习(by quqi99)

    作者:张华  发表于:2016-04-22版权声明:能够随意转载,转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明 ( http://blog.csdn.net/quqi99 ) 组成模 ...

  7. pygame save that Stream as video output.

    python - how to save pygame camera as video output - Stack Overflow  https://stackoverflow.com/quest ...

  8. bzoj 1935 Tree 园丁的烦恼

    题目大意: 一些点,每次查询一个矩形内有多少个点 思路: 因为空间太大 所以不能用什么二维树状数组 需要把这些点和所有查询的矩阵的左下和右上离线下来 先离散化 然后每个子矩阵像二维前缀和那样查询 按照 ...

  9. poj3539 Elevator——同余类bfs

    题目:http://poj.org/problem?id=3539 题目大意是给定 a, b, c,求 1~h 内有多少个数可以被 a, b, c 通过加减法组成: 这是今天刚讲的神奇的——同余类 b ...

  10. Java开源JSP标签库

    01displytag 与Struts结合使用最出名的一个tag主要是显示表格数据很漂亮.完善. 02cewolf tag 用来在web上显示复杂图形报表的一个jsp tag. 03Loading T ...