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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了基于Arcgis for javascript实现百度地图ABCD marker的效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7783字，纯文字阅读大概需要12分钟。

内容图文

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

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

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

基于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的效果全部内容，希望文章能够帮你解决基于Arcgis for javascript实现百度地图ABCD marker的效果所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/356149.html

来源：【匿名】

【上一篇】JS+CSS实现的简单折叠展开多级菜单效果【下一篇】javascript 怎么调用php方法

更多 ►

【基于Arcgis for javascript实现百度地图ABCD marker的效果】教程文章相关的互联网学习教程文章

ArcGIS API for JavaScript 4.2学习笔记[3] 官方第二章Mapping and Views概览与解释【图】

目录如下：连接：第二章 Mapping and Views根据本人体会，【这一章节主要是介绍地图（Map）和视图（View）的。】其中，Get started with MapView（2D）和 Get started with SceneView（3D）两节介绍了如何加载ESRI服务器或者开源的地图和视图。这两节介绍了很重要的概念：Map和View，Map即地理数据，而View代表视图。View主要有两种，MapView和SceneView，前者是2D的，而后者是3D的，区别就是投影到哪里，前者投影到平面上，而后者...

ArcGIS api for javascript——创建地图【代码】

描述这个示例显示ArcGIS Server的一个地图。ArcGIS Server地图是缓存的，意味着它有服务器管理员建来提升性能的一组预先渲染的切片。由于这个原因地图通过 ArcGISTiledMapServiceLayer表示。如果地图服务没有一个可用的缓存，使用 ArcGISDynamicMapServiceLayer。如果不知道地图服务是否有缓存可用，使用 Services Directory寻找。注意切片地图服务图层的构造函数包含服务的URL(http://server.arcgisonline.com/ArcGIS/rest/servic...

ArcGIS api for javascript——查询，然后单击显示信息窗口【代码】

描述本例展示如何配置查询任务为示例的工作流程:1.用户单击一个要素来加亮显示。2.用户再一次单击要素来查看属性信息的 InfoWindow。本例查询USA州，因此ESRI_StateCityHighway_USA的州图层被传给QueryTask构造函数。第一次鼠标单击通过下面的事件监听器捕获:dojo.connect(map, "onClick", executeQueryTask);发生单击时，executeQueryTask函数被调用去执行查询，然后showResults函数增加图形。当用户单击高亮的图形时，第二次鼠标...

关于翻译ArcGIS API for JavaScript开发书籍的经历

一、机缘来临获得翻译的机会得追溯到2014年11月份，当时是在CSDN站内消息中看到了胡俊英编辑发来的邀请，然后我们就通过网络的方式联系上，后来得知待翻译的是一本关于利用JavaScript进行WebGIS开发的英文原版的时候，我就接受了这个机会。对于我来说这是个机会的原因有：（1）、家在农村，接触英语是从初中开始的，然后高中，再到大学，积累了很多的词汇量，英语的阅读理解能力自认为还是不错的，所以翻译对我来说...

用ArcGIS API for JavaScript制作三维可视化图【代码】【图】

前段时间接了一个项目，涉及到了空间信息三维可视化的工作。之前在网上查找无意中看到ArcGIS API for JavaScript（以下简称“ArcGIS API”或“该API”）可以在网页上制作三维可视化图。好在有友人在国外帮我把整个文档和API下载下来了，于是就着手学习了一下这个API。简介做GIS的肯定清楚ArcGIS是什么，包括一系列的ArcMap、ArcScence、ArcEngine等。ArcGIS推出了这套JavaScript API，现在有4.2版本，该版本可以创建二维、三维的网...

如何使用Arcgis进行画线与面并计算大小？【图】

本篇文章给大家来了的内容是介绍如何使用Arcgis进行画线与面并计算大小？有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。在使用Arcgis API for JavaScript进行做地图开发的过程中，在地图进行画线、画面是经常使用的功能。本文主要介绍这一功能。本文适用Arcgis API版本：Arcgis API for JS 4.x以上。方案分析：1、首先要初始化 map 和 mapView（2D map）；2、再使用Draw进行画线、画面操作；3、最后把线、面添...

教你如何使用arcgis执行查询任务

arcgis 执行查询任务（QueryTask）还有ExecuteAsync？需进一步了解url = string.Format("http://{0}/arcgis2/rest/services/baidu/MapServer/{1}", ip, layerID);QueryTask queryTask = new QueryTask(url);queryTask.ExecuteCompleted += new EventHandler<QueryEventArgs>(queryTask_ExecuteCompleted);queryTask.Failed += new EventHandler<TaskFailedEventArgs>(queryTask_Failed);ESRI.ArcGIS.Client.Tasks.Query query = ne...

arcgis for js栅格图层叠加(Raster Layer)问题【图】

其实呢，这个问题或许与栅格图层（Raster Layer）关系并不十分大，也可能所有类型的图层都有这个问题，我对arcgis尚不十分了解，目前只在栅格图层遇到问题，所以先记下来，存疑。栅格图层啥问题呢？叠不出来，报错。比如，有这么个地图服务：然后想直接叠加其中一个子图层（可见其类型为栅格图层）。代码如下： var layer = new ArcGISDynamicMapServiceLayer("http://192.168.0.225:6080/arcgis/HN_test/MapServer/1"); map.add...

arcgis for js 修改infowindow样式的方法

方法一：function popup() {$(".esriPopup .titlePane").css({ background-color:rgba(64,64,64,0.8)})$(".esriPopup .contentPane").css({ background-color:rgba(64,64,64,0.8), color:#FFFFFF})$(".esriPopup .actionsPane").css({ background-color:rgba(64,64,64,0.8)}) }方法二：.esriPopup .esriPopupWrapper { background-image: url(../images/beijingtu1.png); background-size:100% 100%; box-shadow: 0 0 0 #777777;-w...

基于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(att...

ArcGIS Javascript 异常之No 'Access-Control-Allow-Origin' header【代码】

开发过程中遇到此异常，查询后网上说是跨域访问的问题，给出的解决方案是通过JQuery的跨域访问机制来解决，难道我需要直接找ArcGISTiledMapServiceLayer相关代码，去重构吗？还有给出的解决方案如下，http://resources.arcgis.com/en/help/rest/apiref/config.html，大意就是要设置一下ArcGIS Server服务，可服务是别人的，设置不了。代码如下，在地图类型切换时需要调用另一个网址，就报出了如下错误。if (tp == "mp") {//移...

WEBGIS ,ARCGIS JAVASCRIPT的基本操作【代码】

转载来自：https://blog.csdn.net/kangkang_style/article/details/75601974<!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>Landuse</title><link rel="stylesheet" href="https://js.arcgis.com/3.21/dijit/themes/claro/claro.css"><link rel="stylesheet" href="https://js.arcg...

ArcGIS API for JavaScript 4.3 与ArcGIS Server联动使用【地图服务】【代码】【图】

? 【前言】有好些网友问我怎么使用Server发布的地图服务了，其实非常的简单。我在这里先声明：不提供Server软件，需要的请自行使用互联网搜索资源；不阐述Server如何发布各各种服务，但是我会给出官方的文档（点我），发布服务其实各种老教程都很多了。【软件准备】 Windows 64位以上的系统，XP可以歇菜了，Server是64位原生软件；//Linux发行版也可以，能用Server就行 ArcGIS for Server 10.x版本 ArcGIS for Desktop（用于发布...

ArcGIS API for JavaScript 4.2学习笔记[7] 鹰眼（缩略图的实现及异步处理、Promise、回调函数、监听的笔记）【代码】【图】

?文前说明：关于style就是页面的css暂时不做评论，因为官方给的例子的样式实在太简单了，照抄阅读即可。这篇文章有着大量AJS 4.x版本添加的内容，如监听watch、Promise对象、回调函数、异步处理等内容，原理性的东西我会在文末解释，各位看官不用担心看不懂，我尽量用通俗的语言解释这些。惯例，如果不习惯从头看到尾，可以直接跳到后面看总结。大家应该看过商业地图的缩略图功能吧？以度娘地图为例，在使用街景地图的时候，左下...

vue+arcgis api for javascript初始项目【代码】【图】

先安装好node.js，vue环境了，下面开始 1。确定一个项目目录，如e:\aaaa 2、cmd中转到目录，vue create arcgis-test1 就选择第一个 vue cli v4.5.11 3。安装好之后，转到目录e:\aaaa\arcgis-test1 npm install --save esri-loader 4、然后就用vscode 右键打开项目了，开始编码把components 目录下初始来的helloworld.vue 删除，添加一个map001.vue 导包 <template><div id="viewDiv" style="width:100%;height:600px"></div> ...

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

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【基于Arcgis for javascript实现百度地图ABCD marker的效果】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程