如何在地图上添加标注

大众点评地图

2021-09-23 17:26

谢谢

标注地图的方法如下：
　　
一、环境介绍

　　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>

　　</>