如何使用百度地图API自动获取地址和经纬度

2025-01-01 19:45:30
推荐回答(1个)
回答1:

1、HTML代码如下

  
  
  
    点击地图获取地址和经纬度map,address,lng,lat  
      
      
      
      
  
  
  
  
      
          
              
                经度  
                  
                  
              
              
                纬度  
                  
                  
              
              
                地址  
                  
                      
                      
                  
              
          
      
    
  
  
  

2、JS代码如下

  
    function validate() {  
        var sever_add = document.getElementsByName('sever_add')[0].value;  
        if (isNull(sever_add)) {  
            alert('请选择地址');  
            return false;  
        }  
        return true;  
    }  
  
    //判断是否是空  
    function isNull(a) {  
        return (a == '' || typeof(a) == 'undefined' || a == null) ? true : false;  
    }  
  
    document.getElementById('open').onclick = function () {  
        if (document.getElementById('allmap').style.display == 'none') {  
            document.getElementById('allmap').style.display = 'block';  
        } else {  
            document.getElementById('allmap').style.display = 'none';  
        }  
    }  
  
    var map = new BMap.Map("allmap");  
    var geoc = new BMap.Geocoder();   //地址解析对象  
    var markersArray = [];  
    var geolocation = new BMap.Geolocation();  
  
  
    var point = new BMap.Point(116.331398, 39.897445);  
    map.centerAndZoom(point, 12); // 中心点  
    geolocation.getCurrentPosition(function (r) {  
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {  
            var mk = new BMap.Marker(r.point);  
            map.addOverlay(mk);  
            map.panTo(r.point);  
            map.enableScrollWheelZoom(true);  
        }  
        else {  
            alert('failed' + this.getStatus());  
        }  
    }, {enableHighAccuracy: true})  
    map.addEventListener("click", showInfo);  
  
  
    //清除标识  
    function clearOverlays() {  
        if (markersArray) {  
            for (i in markersArray) {  
                map.removeOverlay(markersArray[i])  
            }  
        }  
    }  
    //地图上标注  
    function addMarker(point) {  
        var marker = new BMap.Marker(point);  
        markersArray.push(marker);  
        clearOverlays();  
        map.addOverlay(marker);  
    }  
    //点击地图时间处理  
    function showInfo(e) {  
        document.getElementById('lng').value = e.point.lng;  
        document.getElementById('lat').value =  e.point.lat;  
        geoc.getLocation(e.point, function (rs) {  
            var addComp = rs.addressComponents;  
            var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;  
            if (confirm("确定要地址是" + address + "?")) {  
                document.getElementById('allmap').style.display = 'none';  
                document.getElementById('sever_add').value = address;  
            }  
        });  
        addMarker(e.point);  
    }  

将js代码放入到html中,我们可以得到效果图如下:


相关问答
最新问答