百度地图API的使用

首先先注册百度地图开放平台开发者账户

申请地址lbsyun.baidu.com/apiconsole/…

其次在应用管理里我的应用下进行创建应用

这里应用类型作为前端人员选择浏览器端，Referer白名单可以写*，表示访问无限制

接下来就可以参考javascriptAPI文档来进行使用了

申请地址：lbsyun.baidu.com/index.php?t… 注意在页面中引用时，要使用自己的密钥（AK）

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

项目实战

    <span id="getLocation">您在哪里</span>
    <div id='container'></div>
    <div class="map"><input type="text" name="" id="" placeholder="请输入具体地址"></div>

/**
 * 定位
 */
function getLocation() {
    const locationTips = document.getElementById('getLocation');
    locationTips.onclick = function() {
        const container = document.getElementById('container');
        container.style.border = '1px solid #e0e0e0';
        var map = new BMap.Map("container"); // 创建地图实例
        var point = new BMap.Point(116.331398, 39.897445); // 创建点坐标  
        map.addControl(new BMap.NavigationControl()); //添加控件
        map.addControl(new BMap.ScaleControl());
        map.addControl(new BMap.OverviewMapControl());
        map.centerAndZoom(point, 12); // 初始化地图，设置中心点坐标和地图级别（比例尺）  



        // 鼠标点击地图
        var geoc = new BMap.Geocoder();
        map.addEventListener("click", function(e) {
            var pt = e.point;
            geoc.getLocation(pt, function(rs) {
                var addComp = rs.addressComponents;
                locationTips.innerHTML = addComp.province + addComp.city + addComp.district + addComp.street;
            });
        });


        // 开启SDK辅助定位
        var geolocation = new BMap.Geolocation();
        geolocation.enableSDKLocation();
        geolocation.getCurrentPosition(function(r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                var mk = new BMap.Marker(r.point);
                map.addOverlay(mk);
                map.panTo(r.point);
                console.log(r.point.lng, r.point.lat);
                // 指定经纬度获取地址(逆地址解析)
                var myGeo = new BMap.Geocoder();
                myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), function(result) {
                    if (result) {
                        console.log(result);
                        locationTips.innerHTML = result.addressComponents.province + result.addressComponents.city + result.addressComponents.district + result.addressComponents.street;
                    }
                });
            } else {
                alert('failed' + this.getStatus());
            }
        });


        function inputAddress() { // 地址解析
            const inputMap = document.querySelector('.map input');
            inputMap.parentNode.style.display = 'block';
            inputMap.onkeydown = function(e) {
                if (e.key == 'Enter') {
                    // 创建地址解析器实例     
                    var myGeo = new BMap.Geocoder();
                    // 将地址解析结果显示在地图上，并调整地图视野    
                    myGeo.getPoint(inputMap.value, function(point) {
                        if (point) {
                            map.centerAndZoom(point, 12);
                            map.addOverlay(new BMap.Marker(point));
                            console.log(point);
                            // 指定经纬度获取地址(逆地址解析)
                            var myGeo = new BMap.Geocoder();
                            myGeo.getLocation(new BMap.Point(point.lng, point.lat), function(result) {
                                if (result) {
                                    locationTips.innerHTML = result.addressComponents.province + result.addressComponents.city + result.addressComponents.district + result.addressComponents.street;
                                }
                            });
                        }
                    });
                };
            };
        }
        inputAddress();

    };
}

PS：更详细的内容可以参考文档