一、高德地图坐标拾取功能怎么用
高德地图提供了一个方便易用的坐标拾取器,可以通过该拾取器获取某一地点的经纬度坐标。
使用步骤:
1. 首先在高德地图官网开放平台中申请应用,获取应用的key。
2. 在需要使用坐标拾取功能的地方,引入API Javascript文件和CSS文件。
<script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_APP_KEY"></script> <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
3. 在HTML页面中添加一个有固定宽高的DIV标签,用于显示地图。
4. 在Javascript中调用高德地图API的create方法,创建地图实例。
var map = new AMap.Map("mapContainer", { center: [116.397428, 39.90923], zoom: 13 });
5. 在HTML页面中添加一个按钮或其他交互元素,用于触发坐标拾取事件。
6. 在Javascript中添加按钮的点击事件,调用高德地图API的plugin方法创建坐标拾取插件实例,并在插件中设置拾取完成后的回调函数。
var pickBtn = document.querySelector('#pickBtn'); pickBtn.onclick = function() { var plugin = new AMap.MarkerEditor(map); plugin.on('addMarker', function(e) { console.log(e.marker.getPosition()); }); }
7. 点击按钮即可在地图上拾取坐标,控制台中将输出经纬度坐标。
二、高德地图拾取系统的优点
高德地图拾取器是一款功能强大、简单易用的地图坐标拾取系统。优点如下:
1. 高德地图相对于其他地图API来说,免费使用的条件相对更加优惠、灵活。对于使用者,减少了经济上的压力,也增进了对于高德地图API本身的信任感。
2. 高德地图的坐标拾取插件对用户友好,坐标获取方式简单易懂,易于上手。在多种功能插件中加入了坐标拾取,大大提高了使用多种插件的用户体验。
3. 高德地图已经形成了一个完整、成熟的生态体系。添加自定义图标、标记、轨迹等功能成熟完善,支持高德的基础上还可以适配其他第三方数据,大大拓宽了开发者的应用范围。
4. 高德地图在移动端和web端均提供了统一(或接近统一)的API接口,使得移动端与web端也能更加方便快捷地进行开发;并且SDK文档清晰,有较好的维护更新周期,也适用于经验较少的开发人员。
三、高德地图api坐标拾取器的使用方法
高德地图API提供了一个MarkerEditor插件类,可以实现在地图上任意位置添加标记,并获取标记位置信息。使用方法非常简单,只需要以下几步即可:
1. 引入高德地图API的JS文件和CSS文件。
<script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_APP_KEY"></script> <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
2. 创建地图实例。
var map = new AMap.Map('container', { zoom: 14, center: [116.39,39.9] });
3. 创建MarkerEditor插件实例。
var plugin = new AMap.MarkerEditor(map);
4. 拾取坐标并获取位置信息。
plugin.on('addMarker', function(e) { console.log(e.marker.getPosition()); console.log(e.marker.getExtData()); });
5. 其他方法。
除了获取标记信息外,插件还提供了其他一些方法,如取消标记、删除标记等。
// 取消标记 plugin.cancel(); // 删除标记 plugin.removeMarker(marker); // 清除所有标记 plugin.clear();
四、高德地图拾取器的其他应用
除了坐标拾取以外,高德地图拾取器还能够实现线、面的绘制,如路径规划、场地规划等应用场景下可以使用。此外,高德地图应用其它得心应手的技术,比如离线地图技术,本地瓦片技术,坐标转换技术等。
在实现线、面绘制时,可以使用PolyEditor插件。
var polyEditor = new AMap.PolyEditor(map, polygon); polyEditor.on('addnode', function(event) { console.log('添加点:', event.target.getPath()); })
在实现路径规划时,可以使用DriveRoute插件。
var driving = new AMap.Driving({ policy: AMap.DrivingPolicy.LEAST_TIME, map: map }); driving.search([ {keyword: '北京西站'}, {keyword: '故宫'} ]);
其他应用及插件请参考高德地图API官方文档。