基于Arcgis for javascript实现百度地图ABCD marker的效果


Posted in Javascript onSeptember 12, 2015

先给大家展示实现后效果:

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

基于Arcgis for javascript实现百度地图ABCD marker的效果

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

基于Arcgis for javascript实现百度地图ABCD marker的效果

显示信息

实现思路:

1、列表与地图的互动

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

关键代码:

title.on("mouseover",function(){ 
 var attr = $(this).data("attr"); 
 $("#icon"+attr.id).css("background","url('images/blue.png')"); 
 var pt=new Point(attr.x,attr.y,{"wkid":4326}); 
 var pms = new esri.symbol.PictureMarkerSymbol("images/blue.png",24,26) 
 var gImg = new Graphic(pt,pms); 
 gLyrHover.add(gImg); 
}); 
title.on("mouseout",function(){ 
 var attr = $(this).data("attr"); 
 $("#icon"+attr.id).css("background","url('images/red.png')"); 
 gLyrHover.clear(); 
});

2、地图与列表的互动

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

关键代码:

gLyr.on("mouse-over",function(e){ 
 map.setMapCursor("pointer"); 
 var sms = e.graphic.symbol; 
 sms.url = "images/blue.png"; 
 gLyr.redraw(); 
 $("#icon"+e.graphic.attributes.id).css("background","url('images/blue.png')"); 
}); 
gLyr.on("mouse-out",function(e){ 
 map.setMapCursor("default"); 
 var sms = e.graphic.symbol; 
 sms.url = "images/red.png"; 
 gLyr.redraw(); 
 $("#icon"+e.graphic.attributes.id).css("background","url('images/red.png')"); 
});

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

4、数据以JSON形式存在。

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

完整代码:

<!DOCTYPE html> 
<html> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> 
 <title></title> 
 <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css"> 
 <style type="text/css"> 
 html, body, #map { 
  height: 100%; 
  margin: 0; 
  padding: 0; 
  font-size: 62.5%; 
  font-family:"微软雅黑"; 
 } 
 .search-box{ 
  z-index: 99; 
  background: #fff; 
  border: 1px solid #888888; 
  border-radius: 5px; 
  width: 220px; 
  max-height:600px; 
  overflow-y: auto; 
  position: absolute; 
  top: 120px; 
  left: 10px; 
 } 
 .search-box-title{ 
  padding: 6px 10px; 
  text-align: left; 
  font-size: 13px; 
  font-weight: bold; 
  color: #f2f2f2; 
  background: #85b0db; 
 } 
 .search-box-result{ 
  list-style: none; 
  margin-left:-40px; 
  margin-top: 0px; 
 } 
 .search-box-result-item{ 
  border-bottom: 1px solid #eeeeee; 
  padding: 5px 8px; 
 } 
 .search-name{ 
  float: right; 
  font-weight: bold; 
  font-size: 13px; 
  margin-top: 3px; 
  margin-right: 10px; 
 } 
 .search-name-title{ 
  background: #f2f2f2; 
 } 
 .search-name-title:hover{ 
  cursor: pointer; 
 } 
 .search-detail{ 
  border-top: 1px dashed #eeeeee; 
  margin-top: 3px; 
  padding: 3px 5px; 
  line-height: 18px; 
 } 
 .search-icon{ 
  background: url("images/red.png"); 
  width: 24px; 
  height: 26px; 
  background-repeat: no-repeat; 
 } 
 .search-text{ 
  color: #ffffff; 
  font-weight: bold; 
  font-size: 16px; 
  margin-left:7px ; 
 } 
 .detail{ 
  color: #85b0db; 
  font-weight: bold; 
  text-align: right; 
 } 
 .detail:hover{ 
  cursor: pointer; 
 } 
 </style> 
 <script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script> 
 <script src="jquery-1.8.3.js"></script> 
 <script type="text/javascript"> 
 var map; 
 var data = [ 
  { 
  "id":"A","name":"拉萨", "x":91.162998, "y":29.71042, 
  "desc":"拉萨是中国西藏自治区的首府,西藏的政治、经济、文化和宗教中心,也是藏传佛教圣地。" 
  }, 
  { 
  "id":"B", "name":"西宁","x":101.797303,"y":36.593642, 
  "desc":"西宁是青海省的省会,古称西平郡、青唐城,取”西陲安宁“之意,是整个青藏高原最大的城市。" 
  }, 
  { 
  "id":"C","name":"兰州","x":103.584297,"y":36.119086, 
  "desc":"兰州,甘肃省省会,西北地区重要的工业基地和综合交通枢纽,西部地区重要的中心城市之一,丝绸之路经济带的重要节点城市。" 
  }, 
  { 
  "id":"D","name":"成都","x":104.035508,"y":30.714179, 
  "desc":"成都,简称蓉,四川省省会,1993年被国务院确定为西南地区的科技、商贸、金融中心和交通、通讯枢纽。" 
  } 
 ]; 
 require([ 
   "esri/map", 
   "esri/layers/ArcGISTiledMapServiceLayer", 
   "esri/geometry/Point", 
   "esri/layers/GraphicsLayer", 
   "esri/graphic", 
   "dojo/_base/Color", 
   "dojo/domReady!"], 
  function(Map, 
    Tiled, 
    Point, 
    GraphicsLayer, 
    Graphic, 
    Color) 
  { 
   map = new Map("map",{logo:false}); 
   var tiled = new Tiled("http://localhost:6080/arcgis/rest/services/china/MapServer",{"id":"tiled"}); 
   map.addLayer(tiled); 
   var mapCenter = new Point(103.847, 36.0473, {"wkid":4326}); 
   map.centerAndZoom(mapCenter,0); 
   var gLyr = new GraphicsLayer({"id":"gLyr"}); 
   map.addLayer(gLyr); 
   var gLyrHover = new GraphicsLayer({"id":"gLyrHover"}); 
   map.addLayer(gLyrHover); 
   var gLyrLbl = new GraphicsLayer({"id":"gLyrLbl"}); 
   map.addLayer(gLyrLbl); 
   map.on("load",function(){ 
   $("#search").show(); 
   for(var i=0;i<data.length;i++){ 
    var li = $("<li />").addClass("search-box-result-item").appendTo($("#result")); 
    var name = $("<div />").addClass("search-name").html(data[i].name); 
    var icon = $("<div />").addClass("search-icon") 
     .attr("id","icon"+data[i].id) 
     .append("<div class='search-text'>"+data[i].id+"</div>"); 
    var title = $("<div />").addClass("search-name-title") 
     .append(name).append(icon).appendTo(li) 
     .data("attr",data[i]); 
    var desc = $("<div />").addClass("search-detail").html(data[i].desc).appendTo(li); 
    var more = $("<div />").addClass("detail").appendTo(li).html(">>详细"); 
    title.on("mouseover",function(){ 
    var attr = $(this).data("attr"); 
    $("#icon"+attr.id).css("background","url('images/blue.png')"); 
    var pt=new Point(attr.x,attr.y,{"wkid":4326}); 
    var pms = new esri.symbol.PictureMarkerSymbol("images/blue.png",24,26) 
    var gImg = new Graphic(pt,pms); 
    gLyrHover.add(gImg); 
    }); 
    title.on("mouseout",function(){ 
    var attr = $(this).data("attr"); 
    $("#icon"+attr.id).css("background","url('images/red.png')"); 
    gLyrHover.clear(); 
    }); 
    title.on("click",function(){ 
    var attr = $(this).data("attr"); 
    showCity(attr); 
    }); 
    var pt=new Point(data[i].x,data[i].y,{"wkid":4326}); 
    var pms = new esri.symbol.PictureMarkerSymbol("images/red.png",24,26) 
    var gImg = new Graphic(pt,pms,data[i]); 
    gLyr.add(gImg); 
    var font = new esri.symbol.Font(); 
    font.setSize("10pt"); 
    font.setFamily("微软雅黑"); 
    var text = new esri.symbol.TextSymbol(data[i].id); 
    text.setOffset(0,-2); 
    text.setFont(font); 
    text.setColor(new dojo.Color([255,255,255,100])); 
    var gLbl = new esri.Graphic(pt,text,data[i]); 
    gLyrLbl.add(gLbl); 
   } 
   gLyr.on("mouse-over",function(e){ 
    map.setMapCursor("pointer"); 
    var sms = e.graphic.symbol; 
    sms.url = "images/blue.png"; 
    gLyr.redraw(); 
    $("#icon"+e.graphic.attributes.id).css("background","url('images/blue.png')"); 
   }); 
   gLyr.on("mouse-out",function(e){ 
    map.setMapCursor("default"); 
    var sms = e.graphic.symbol; 
    sms.url = "images/red.png"; 
    gLyr.redraw(); 
    $("#icon"+e.graphic.attributes.id).css("background","url('images/red.png')"); 
   }); 
   gLyr.on("click",function(e){ 
    var attr = e.graphic.attributes; 
    showCity(attr); 
   }); 
   }); 
 
   function showCity(attr){ 
   var pt=new Point(attr.x,attr.y,{"wkid":4326}); 
   map.infoWindow.setTitle(attr.name); 
   map.infoWindow.setContent(attr.desc); 
   map.infoWindow.resize(200,80); 
   map.infoWindow.show(pt); 
   map.centerAndZoom(pt,0); 
   } 
  }); 
 </script> 
</head> 
<body> 
<div id="search" class="search-box" style="display: none;"> 
 <div class="search-box-title">查询结果</div> 
 <ul class="search-box-result" id="result"> 
 </ul> 
</div> 
<div id="map"> 
</div> 
</body> 
</html>

以上内容就是三水点靠木小编给大家分享的基于Arcgis for javascript实现百度地图ABCD marker的效果,希望大家喜欢。

Javascript 相关文章推荐
Javascript打印网页部分内容的脚本
Nov 17 Javascript
js对象基础实例分析
Jan 13 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
JS实现文字向下滚动完整实例
Feb 06 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
JavaScript事件代理和委托详解
Apr 08 Javascript
JavaScript数据结构之二叉树的删除算法示例
Apr 13 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
VUE 实现复制内容到剪贴板的两种方法
Apr 24 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 Javascript
Vue项目打包压缩的实现(让页面更快响应)
Mar 10 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 Javascript
jquery实现最简单的滑动菜单效果代码
Sep 12 #Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 #Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 #Javascript
javascript判断网页是关闭还是刷新
Sep 12 #Javascript
js查看一个函数的执行时间实例代码
Sep 12 #Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
Sep 12 #Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 #Javascript
You might like
php正则表达式(regar expression)
2011/09/10 PHP
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
浅析XMLHttpRequest的缓存问题
2013/12/13 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
2014/06/24 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
Python去除字符串两端空格的方法
2015/05/21 Python
python实现给数组按片赋值的方法
2015/07/28 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
python队列queue模块详解
2018/04/27 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
Python使用Pygame绘制时钟
2020/11/29 Python
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
我们是伦敦女孩:WalG
2018/01/08 全球购物
C#笔试题和英文面试题
2013/02/07 面试题
门诊挂号室室长岗位职责
2013/11/27 职场文书
毕业生自我鉴定
2013/12/04 职场文书
银行资信证明
2015/06/17 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书