百度地圖JS-API：點擊地圖獲取經緯度

1.引用百度地圖引用js

<%--這是百度的js--%>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=這里是填寫你在百度地圖申請的秘鑰，不是這串文字"></script>
<%--這是引用個jq--%>
<script type="text/javascript" src="jquery.min.js"></script>

2.創建input和div

<!--這是地圖的div-->
<div id="allmap" style="width: 100%;height: 450px;"></div>
 <!--這是地址詳情框-->
<input type="text" id="site">
 <!--這是 經度-->
<input type="text" id="longitude">
   <!--這是 維度--> 
<input type="text" id="latitude">

3.寫功能js

<script>
// 百度地圖API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(107.31612162513613,30.43983123446668);//當前坐標經緯可改
    map.centerAndZoom(point,17);//顯示級數越大越細
    map.addOverlay(new BMap.Marker(point));//定點坐標紅點覆蓋
    map.enableScrollWheelZoom(true);
    var geoc = new BMap.Geocoder();    

    map.addEventListener("click", function(e){   
        //通過點擊百度地圖，可以獲取到對應的point, 由point的lng、lat屬性就可以獲取對應的經度緯度     
        var pt = e.point;
        geoc.getLocation(pt, function(rs){
            //addressComponents對象可以獲取到詳細的地址信息
            var addComp = rs.addressComponents;
            var site = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;
            //將對應的HTML元素設置值
            $("#site").val(site);
            $("#longitude").val(pt.lng);
            $("#latitude").val(pt.lat);
        });        
    });
</script>

 

 效果(在地圖點那，就文本框顯示那的數據)