您的位置:

高德地图拾取器详解

一、高德地图坐标拾取功能怎么用

高德地图提供了一个方便易用的坐标拾取器,可以通过该拾取器获取某一地点的经纬度坐标。

使用步骤:

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官方文档。