百度地图坐标查询（真实坐标）

因为百度地图使用的是自己加密之后的坐标系，所以和网络上常用的WGS84坐标系有较大的偏差，不过百度地图API有现成的转换方法直接用就是，代码如下

1.添加坐标查询方法

     theLocation(){
    if(document.getElementById("lng").value != "" && document.getElementById("lat").value != ""){
        window.map.clearOverlays();
        var new_point = new BMapGL.Point(document.getElementById("lng").value,document.getElementById("lat").value);

        //坐标转换完之后的回调函数
       let translateCallback = function (data){
            console.log(data);
            if(data.status === 0) {
                var marker = new BMapGL.Marker(data.points[0]);
                window.map.addOverlay(marker);
                //var label = new BMapGL.Label("转换后的百度标注（正确）",{offset:new BMapGL.Size(20,-10)});
                // marker.setLabel(label); //添加百度label
                window.map.setCenter(data.points[0]);
            }
        }

        setTimeout(function(){
            var convertor = new BMapGL.Convertor();
            var pointArr = [];
            pointArr.push(new_point);
            //console.log(new_point);
            // console.log(pointArr);
            convertor.translate(pointArr, COORDINATES_GCJ02, COORDINATES_BD09, translateCallback)
        }, 1000);

    }
}

逻辑就是先把实际坐标转成百度坐标，然后在地图上展示

div及css

    <div  id='result'>
        经度: <input id="lng" type="text"/>
        纬度: <input id="lat" type="text"/>
        <button @click="theLocation">查询</button>
    </div>

    #result{
        padding: 7px 10px;
        position: fixed;
        top: 15rem;
        left: 20px;
        width: 450px;
        background: #fff;
        box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
        border-radius: 7px;
        z-index: 99;
    }
    #result input{
        width:130px;
        margin-right:10px;
        height:25px;
        border: 1px solid rgba(27, 142, 236, 0.5);
        border-radius: 5px;
    }
    #result button{
        border: 1px solid rgba(27, 142, 236, 0.5);
        border-radius: 5px;
        background: rgba(27, 142, 236, 0.5);
        color: #fff
    }
    .info {
        z-index: 999;
        width: auto;
        min-width: 22rem;
        padding: .75rem 1.25rem;
        margin-left: 1.25rem;
        position: fixed;
        top: 10rem;
        background-color: #fff;
        border-radius: .25rem;
        font-size: 14px;
        color: #666;
        box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    }
    #r-result button{
        border: 1px solid rgba(27, 142, 236, 0.5);
        border-radius: 5px;
        background: rgba(27, 142, 236, 0.5);
        color: #fff
    }