请完成以下验证码
请完成以下验证码
查看: 12539|回复: 9
JS代码详解如何实现在ArcGIS在线地图上添加标注标记
一、环境介绍
1，最近在与一家地图厂家做地图对接，对方用的是在ArcGIS地图上做的二次开发，给我的API也是官方的API，我需要在他们地图上实现我们自己公司的一些功能（比如说：添加标记，定位中心等功能），因为环境问题，所以目前只能使用官方在线地图demo实现，下面是我整理的如何实现在ArcGIS在线地图上添加标注，希望能帮助在线ArcGIS地图开发的朋友。
2.地图：ArcGIS官方在线地图，ArcGIS Javascript API版本：&&3.9
3.软件截图一（在地图上点击后添加的标注标记，点击标注标记后弹出的详细信息）：
地图.jpg (870.11 KB, 下载次数: 87)
20:49 上传
二、操作步骤
1.下面是我的代码（点击地图就可以添加一个标注标记，点击标注标记就可以显示详细信息）：
&!DOCTYPE html&
&html&
&&&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=&/3.9/js/esri/css/esri.css&&
& & &style&
& && &html, body, #map {
& && &&&height: 100%; width: 100%; margin: 0; padding: 0;
& && &}
& && &#controls {
& && &&&background: #
& && &&&box-shadow: 0 6px 6px -6px #999;
& && &&&color: #444;
& && &&&font-family: sans-
& && &&&height:
& && &&&left: 1
& && &&&padding: 1
& && &&&position:
& && &&&top: 1
& && &&&width:
& && &&&z-index: 40;
& && &}
& && &#controls div {
& && &&&padding: 0 0 1em 0;
& && &}
& & &/style&
& & &script src=&/3.9/&&&/script&
& & &script&
& && &var map, graphicL
& && &//标记数组
& && && && &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&: 118.,
& && &&&//& & &y&: 36.,
& && &&&//& & &spatialReference&: { &wkid&: 102113 }
& && &&&//& && && && &}));
& && &&&//设置标注显示的图标
& && &&&//var symbol = new esri.symbol.SimpleMarkerSymbol();
& && &&&var symbol1 = new esri.symbol.PictureMarkerSymbol(&images/iconA_32.png&, 25, 25);
& && &&&//要在模版中显示的参数
& && &&&var attr = { &address&: &山东省淄博市张店区& };
& && &&&//创建模版
& && &&&var infoTemplate = Template(&标题&, &地址:${address}&);
& && &&&//创建图像
& && &&&var graphic = new esri.Graphic(pt, symbol1, attr, infoTemplate);
& && &&&//把图像添加到刚才创建的图层上
& && &&&graphicLayer.add(graphic);
& && &&&setMapCenter(xx, yy , 1);
& && && && && && && && &}
& && && && && && && && &
& && && && && && && && &function setMapCenter(xx, yy , level) {
& && && && && && && && && && &&&var point = new esri.geometry.Point(xx, yy, map.spatialReference);
& && && && && && && && && && &&&map.centerAndZoom(point, level);
& && && && && && && && &}
& && && && && && && && &
& && && && && && && && &//添加标注
& && && && &function mapAddOverLay(xx, yy, id, labelname) {
& && && && && & var point = new BMap.Point(xx, yy);
& && && && && & var marker = new BMap.Marker(point);
& && && && && & 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&
& & &!--&div id=&controls&&
& && &&div&Click the map.&/div&
& && &&input type=&checkbox& id=&geodesic&&
& && &&label for=&geodesic&&Geodesic?&/label&
& & &/div& --&
&&&/body&
&/html&复制代码
三、相关链接
心得网 - 论坛版权1、本主题所有言论和图片纯属会员个人意见，与本论坛立场无关
2、本站所有主题由该帖子作者发表，该帖子作者与享有帖子相关版权
3、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者和的同意
4、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任
5、本帖部分内容转载自其它媒体，但并不代表本站赞同其观点和对其真实性负责
6、如本帖侵犯到任何版权问题，请立即告知本站，本站将及时予与删除并致以最深的歉意
7、管理员和版主有权不事先通知发贴者而删除本文
mapAddOverLay这个方法是在哪调用的啊
mapAddOverLay这个方法是在哪调用的啊
这个就是你想要在地图上添加的具体标注点位信息，这个方法是自己掉用，传入对应的参数值就可以了（xx,yy）对应经纬度，id是我项目中用的，labelname就是标注的标签说明内容
楼主，请问怎么改成自己发布的地图呢，另外我下载了Api3.9离线部署时候就会出错不显示地图
评分: 5 你要讲离线api相关的配置要配置好，要么全部配置离线，要么全部配置在线，具体的可能你要慢慢研究了，只提供意见，很久没弄了！&
想在离线地图上标记；怎么弄？
评分: 5 离线标记跟在线标记是一样的，只是地图源一个是在线一个离线，在线的用在线API，用离线api就可以了！&
请问下，怎么接触绑定在map上的事件，我使用map.off(&click&),没有解绑。
请问怎么把数据库的数据（里面有经纬度）标记到我发布的地图上。是批量的。
评分: 5 批量添加标记点不久行了？也就是一个简单的for循环添加标记&
Powered by本帖子已过去太久远了，不再提供回复功能。