如何在地图上添加标注

如何在地圖上添加標注

瀏覽次數：1066 發布時間：2021-09-23 17:40:38

謝謝

標注地圖的方法如下：　　
一、環境介紹　　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:13:40