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

浏览次数：1303 发布时间：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