如何在地图上添加标注

浏览次数：726 发布时间：2021-09-23 17:37:34

谢谢

标注地图的方法如下：　　
一、环境介绍　　1，最近在与一家地图厂家做地图对接，对方用的是在ArcGIS地图上做的二次开发，给我的API也是官方的API，我需要在他们地图上实现我们自己公司的一些功能（比如说：添加标记，标注中心等功能），因为环境问题，所以目前只能使用官方在线地图demo实现，下面是我整理的如何实现在ArcGIS在线地图上添加标注。
2.地图：ArcGIS官方在线地图，ArcGIS Javascript API版本：
3.9
3.软件截图一（在地图上点击后添加的标注标记，点击标注标记后弹出的详细信息）：
二、操作步骤
1.下面是我的代码（点击地图就可以添加一个标注标记，点击标注标记就可以显示详细信息）：　　<!DOCTYPE > 　　<> 　　<head> 　　<meta http-equiv="Content-Type" content="text/; charset=utf-8"> 　　<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> 　　<title></title> 　　<link rel="stylesheet" href="链接"> 　　<style> 　　, body, #map { 　　height: 100%; width: 100%; margin: 0; padding: 0; 　　} 　　#controls { 　　background: #fff; 　　box-shadow: 0 6px 6px -6px #999; 　　color: #444; 　　font-family: sans-serif; 　　height: auto; 　　left: 1em; 　　padding: 1em; 　　position: absolute; 　　top: 1em; 　　width: auto; 　　z-index: 40; 　　} 　　#controls div { 　　padding: 0 0 1em 0; 　　} 　　</style> 　　<script src="链接"></script> 　　<script> 　　var map, graphicLayer; 　　//标记数组　　var allMarkers = []; 　　require([ 　　"esri/map", "esri/geometry/Circle", "esri/symbols/SimpleFillSymbol", 　　"esri/graphic", "esri/layers/GraphicsLayer", 　　"dojo/dom", "dojo/dom-attr", "dojo/domReady!" 　　], function( 　　Map, Circle, SimpleFillSymbol, 　　Grahpic, GraphicsLayer, 　　dom, domAttr 　　) { 　　map = new Map("map", { 　　basemap: "streets", 　　center: [120.741, 30.39], 　　slider: false, 　　zoom: 2 　　}); 　　//创建图层　　graphicLayer = new GraphicsLayer(); 　　//把图层添加到地图上　　map.addLayer(graphicLayer); 　　map.on("click", function(e) { 　　addMarker(e.mapPoint.x, e.mapPoint.y); 　　}); 　　map.showZoomSlider(); 　　}); 　　function addMarker(xx, yy) { 　　//设置标注的经纬度　　//方法一　　var pt = new esri.geometry.Point(xx, yy, map.spatialReference); 　　//方法二　　// var pt = new esri.geometry.geographicToWebMercator(new esri.geometry.Point({ 　　// "x": 11
8.0605760000, 　　// "y": 3
6.8424320000, 　　// "spatialReference": { "wkid": 102113 } 　　// })); 　　//设置标注显示的图标　　//var symbol = new esri.symbol.SimpleMarkerSymbol(); 　　var symbol1 = new esri.symbol.PictureMarkerSymbol("images/iconA_3
2.png", 25, 25); 　　//要在模版中显示的参数　　var attr = { "address": "山东省淄博市张指路人地图标注服务中心区" }; 　　//创建模版　　var infoTemplate = new esri.InfoTemplate("标题", "地址:${address}"); 　　//创建图像　　var graphic = new esri.Graphic(pt, symbol1, attr, infoTemplate); 　　//把图像添加到刚才创建的图层上　　graphicLayer.add(graphic); 　　setMapCenter(xx, yy , 1); 　　} 　　function setMapCenter(xx, yy , level) { 　　var nt = new esri.geometry.Point(xx, yy, map.spatialReference); 　　map.centerAndZoom(nt, level); 　　} 　　//添加标注　　function mapAddOverLay(xx, yy, id, labelname) { 　　var nt = new BMap.Point(xx, yy); 　　var marker = new BMap.Marker(nt); 　　map.addOverlay(marker); //添加标注　　allMarkers.push(marker); //记录覆盖物句柄　　if (labelname != "") { 　　var label = new BMap.Label(labelname, { offset: new BMap.Size(20, -10) }); 　　marker.setLabel(label); //添加Label 　　} 　　//添加标注回调　　addOverlayCallback(marker, xx, yy, id); 　　} 　　</script> 　　</head> 　　<body> 　　<div id="map"></div> 　　 　　</body> 　　</>

发布于：2021-09-23 20:10:36