如何在卫星地图上添加标注我的商铺位置信息呢？

如何在衛星地圖上添加標注我的商鋪位置信息呢？

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

飛向梧桐

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