高德地图 JS API - 根据地名实现标记定位

2018-08-02 06:22:19来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

德地图 JS API 使用前的准备工作请参考官方网站说明: https://lbs.amap.com/api/javascript-api/guide/abc/prepare

 

根据地名实现地图标记定位,主要依赖高德地图的:地理编码与逆地理编码。下面来看具体的实现代码:

1. HTML (地图容器)

<div class="map-container" id="container"></div>

 

2. JAVASCRIPT

function markLocation(mapId, address) {
    AMap.plugin('AMap.Geocoder', function() {
        var geocoder = new AMap.Geocoder();            
        geocoder.getLocation(address, function(status, result) {
            if (status === 'complete' && result.info === 'OK') {

                // 经纬度                      
                var lng = result.geocodes[0].location.lng;
                var lat = result.geocodes[0].location.lat;

                // 地图实例
                var map = new AMap.Map(mapId, {
                    resizeEnable: true, // 允许缩放
                    center: [lng, lat], // 设置地图的中心点
                    zoom: 15        // 设置地图的缩放级别,0 - 20
                });
                        
                // 添加标记
                var marker = new AMap.Marker({
                    map: map,
                    position: new AMap.LngLat(lng, lat),   // 经纬度
                });
            } else {
                console.log('定位失败!');
            }
        });
    });
}

 

方法写好了,调用很简单了:

// 传入地图容器ID 和 地名
markLocation('container', '湖北省武汉市');

 

3. 效果图

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JS性能优化 之 FOR循环

下一篇:macbook 入门