zoukankan      html  css  js  c++  java
  • 高德地图 JS API

    德地图 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. 效果图

  • 相关阅读:
    2019春季第五周作业
    第四周作业
    第三周作业编程总结
    第四周编程总结
    第三周编程总结
    2019春第一周作业编程总结
    我人生中对我影响深刻的三个老师
    秋季学习总结
    自我介绍
    2019春第10周作业
  • 原文地址:https://www.cnblogs.com/similar/p/9400601.html
Copyright © 2011-2022 走看看