概述：

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

    前言 Tomcat隶属于Apache基金会,是开源的轻量级Web应用服务器,使用非常广泛.server.xml是Tomcat中最重要的配置文件,server.xml的每一个元素都对应了Tomcat中的 ...

  2. Quartz.Net 使用心得（二）

    工作中需要做一个简易的Cron字符串生成器,并且要获取生成的Cron后面10次的触发时间来验证. 此问题困扰了我很久时间,CSDN上有一个Java版本的,本人菜鸟,想移植到C#中,语法上怎么也不通过. ...

  3. 内核信号处理 & CPU8个通用寄存器

    内核信号处理参考: http://www.spongeliu.com/165.html 信号本质上是在软件层次上对中断机制的一种模拟(注意区分中断.异常.信号),其主要有以下几种来源: 程序错误:除零 ...

  4. COCOS学习笔记--变速动作Speed和ActionEase

    变速动作和复合动作类似.也是一种特殊的动作,它能够把不论什么动作依照改变后的速度运行.变速动作与复合动作最大的差别就是复合动作仅仅是单纯的组合一系列动作,而变速的做在组合一系列动作后还要去改变动作的运 ...

  5. Oracle移除表空间的数据文件 ora-00604 ora-01426

     项目背景:在之前开发环境数据库管理比較乱,在表空间不足时仅仅是加入数据文件,測试完后数据己删除,但数据库表空间所占的空间不能回收,导致数据库的存储文件夹使用率达到97%以上实际使用仅仅有10%, ...

  6. BZOJ 1798: [Ahoi2009]Seq 维护序列seq （线段树乘法加法的混合操作）

     题目:点击打开链接 大意:一个数组.三个操作.第一种是区间[a,b]每一个数乘乘,另外一种是区间[a,b]每一个数加c,第三种是查询[a,b]区间的和并对p取摸. 两种操作就不能简单的仅仅往下传 ...

  7. 为什么使用 use strict

    进入标志: "use script"; 使用方式: 可以在 js 代码的第一行,也可以使用在函数中.但是写在 js 代码第一行不利于文件合并,因此可以写在一个自调用函数的第一行 使 ...

  8. 測试赛D - The War（有控制范围的贪心）

    D - The War Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%lld & %llu Submit St ...

  9. python 文档生成 字符串替换

    替换 fnr, fnr_source, fnw = 'my.py.html', '产品清单.txt', 'my.py.res.html'd_source = {}with open(fnr_sourc ...

  10. 第十四章 netlink机制--基于Linux3.10【转】

    本文转载自:http://blog.csdn.net/shichaog/article/details/44682613 Netlink基于网络的消息机制,能够让用户和内核空间进行通信,12.3节提到 ...