首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于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的效果，希望大家喜欢。

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

- Author -

LZU-GIS

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js 格式化时间日期函数小结
Mar 20 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
Dec 19 Javascript
input链接页面、打开新网页等等的具体实现
Dec 30 Javascript
当达到输入长度时表单自动切换焦点
Apr 06 Javascript
JS实现简单的顶部定时关闭层效果
Jun 15 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
详解vue-router2.0动态路由获取参数
Jun 14 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
总结4个方面优化Vue项目
Feb 11 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
软件工程师面试题(40) Javascript面试题(44) Servlet面试题(20) J2EE面试题(19) UNIX面试题(27) EJB面试题(46) Delphi面试题(13) PYTHON面试题(27) Ruby面试题(15) MySQL面试题(19)
You might like
PHP小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
php数组一对一替换实现代码
2012/08/31 PHP
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
php操作redis常见方法示例【key与value操作】
2020/04/14 PHP
基于jQuery的动态增删改查表格信息，可左键/右键提示（原创自Zjmainstay）
2012/07/31 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
巧用canvas
2017/01/21 Javascript
vue-router单页面路由
2017/06/17 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
原生JS实现移动端web轮播图详解（结合Tween算法造轮子）
2017/09/10 Javascript
解决layui动态加载复选框无法选中的问题
2019/09/20 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
JS中队列和双端队列实现及应用详解
2020/09/29 Javascript
在Python中处理时间之clock()方法的使用
2015/05/22 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
Python无损音乐搜索引擎实现代码
2018/02/02 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
爱尔兰旅游网站：ebookers.ie
2020/01/24 全球购物
介绍一下Linux文件的记录形式
2013/09/29 面试题
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
团队经理竞聘书
2014/03/31 职场文书
2014领导干部四风问题查摆思想汇报
2014/09/13 职场文书
签证工作证明模板
2015/06/15 职场文书
2015年中秋节主持词
2015/07/30 职场文书
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python