百度地图拖拽获取地址实例

小白 2022-08-31 原创文章


百度地图拖拽获取地址实例




引入百度

<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=XXXXX"></script>
//地址解析 创建点
var myGeo = new BMapGL.Geocoder();
function geoCode(){
    map.clearOverlays();
    var address = $("#address").val()
    myGeo.getPoint(address, function(point){
        if(point){
            map.centerAndZoom(point, 16);
            // map.addOverlay(new BMapGL.Marker(point, {title: '北京市海淀区上地10街'}))
            var mk = new BMapGL.Marker(point);
            mk.enableDragging();
            map.addOverlay(mk)
            mk.addEventListener("dragend", function(e){
                var x = e.latLng.lng; //经度
                var y = e.latLng.lat; //纬度
                $("[name='lat']").val(y)
                $("[name='lng']").val(x)
                // 根据坐标得到地址描述
                myGeo.getLocation(new BMapGL.Point(x,y), function(result){
                    if (result){
                        $("[name='address']").val(result.address)
                    }
                });
                console.log("拖到的地点的经纬度:" + x + "," + y);
            });
        }else{
            alert('您选择的地址没有解析到结果!');
        }
    })
}

自动获取当前位置
var map = new BMapGL.Map('container');
var zoomCtrl = new BMapGL.ZoomControl();
map.addControl(zoomCtrl);
//获取当前定位
var geolocation = new BMapGL.Geolocation();
geolocation.getCurrentPosition(function(r){
    if(this.getStatus() == BMAP_STATUS_SUCCESS){
        var mk = new BMapGL.Marker(r.point);
        // console.log('point',r.point)
        mk.enableDragging();
        map.addOverlay(mk);
        mk.addEventListener("dragend", function(e){

            var x = e.latLng.lng; //经度
            var y = e.latLng.lat; //纬度
            $("[name='lat']").val(y)
            $("[name='lng']").val(x)
            // 根据坐标得到地址描述
            myGeo.getLocation(new BMapGL.Point(x,y), function(result){
                if (result){
                    $("[name='address']").val(result.address)
                }
            });
            console.log("拖到的地点的经纬度:" + x + "," + y);
        });
        map.panTo(r.point);
        map.centerAndZoom(new BMapGL.Point(r.point.lng,r.point.lat), 12);
    }else {
        map.centerAndZoom(new BMapGL.Point(116.331398,39.897445), 12);
    }
});


站点信息