概述：

在我的博客中，有一篇相关的文章，这段时间，有很多人问我求源码，只是时间过去已长，源代码已找不到，乘着这个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. Vue插槽的另外一些特性

    之前有个项目,想判断一下,某一个模板内的插槽是否被使用. 不知道是不是问题过于简单,网上没有这方面的说明.我就抽时间验证一下vue插槽相关的一些功能. 然后写下这篇随笔,希望对后来人能有一些帮助. 简 ...

  3. ORACLE database console无法登陆

    登陆EM时给我报这个错 Code d'erreur : ssl_error_weak_server_cert_key 仅仅须要关闭EM的SSL就好了 [oracle@ace-PROD1 ~]$ emc ...

  4. Linux C 网络编程——多线程的聊天室实现（server端）

    server端的主要功能: 实现多用户群体聊天功能(此程序最多设定为10人.可进行更改),每一个人所发送的消息其它用户均能够收到.用户能够任意的增加或退出(推出以字符串"bye"实 ...

  5. HDU 5323 SOLVE THIS INTERESTING PROBLEM 爆搜

    pid=5323" target="_blank" style="">链接 Solve this interesting problem Tim ...

  6. shell中获取时间，作为文件夹格式

    近期写了一个小程序,须要用到时间.遍历作为文件夹的一部分 #!/bin/bash for i in {1..30} do date=`date +%Y/%m/%d -d " $i days ...

  7. UVA1602 Lattice Animals 搜索+剪枝

    题目大意 给出一个$w\times h$的网格,定义一个连通块为一个元素个数为$n$的方格的集合$A,\forall x\in A, \exists y\in A$,使得$x,y$有一条公共边.现要求 ...

  8. shell curl 实现rest 并发测试

    for i in {1..50}; do curl http://10.43.95.26:5812/rdk/service/app/example/server/my_service & do ...

  9. Android隐藏状态栏和标题栏，相当于全屏效果

    隐藏标题栏需要使用预定义样式:android:theme=”@android:style/Theme.NoTitleBar”. 隐藏状态栏:android:theme=”@android:style/ ...

  10. ALSA声卡驱动中的DAPM详解之五：建立widget之间的连接关系

    前面我们主要着重于codec.platform.machine驱动程序中如何使用和建立dapm所需要的widget,route,这些是音频驱动开发人员必须要了解的内容,经过前几章的介绍,我们应该知道如 ...