js根據經緯度，獲取省市區。（百度地圖逆地址解析）

Mr.zxy發表於2020-11-14
JS地圖
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=KCMGHINxsK5aHGuO8PzOAupebyVwdNwE"></script>
    <script src="//libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <title>單個逆地址解析</title>
    <style>
        body,html{
           width: 100%;
           height: 100%;
           padding: 0;
           margin: 0;
       }
       #container{
           width: 100%;
           height: 100%;
           overflow: hidden;
       }
       #result{
           position: fixed;
           top: 10px;
           left: 10px;
           padding: 0px 7px;
           min-width: 350px;
           height: 70px;
           line-height: 35px;
           background: #fff;
           box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
           border-radius: 7px;
           z-index: 99;
       }
    </style>
</head>
<body>
    <div id='container'></div>
    <div id='result'>
        點選展示詳細的地址：
        <div id='result_l'></div>
    </div>
    <script>
/*        //例項化地圖
        var map = new BMapGL.Map('container')
        map.centerAndZoom(new BMapGL.Point(119.331398,39.897445), 13);
        var geoc = new BMapGL.Geocoder();
        map.addEventListener('click', function(e){
            //清除地圖上所有的覆蓋物
            map.clearOverlays();
            console.log(e.latlng.cX,'sssssss');
			e.latlng.lng=119.28856679328416;
			var obj={}
			obj.lng=119.28856679328416;
			obj.lat=39.911393131734584;
            var pt = e.latlng;
			//var pt=obj;
			console.log(pt);
            //var marker = new BMapGL.Marker(new BMapGL.Point(pt.lng, pt.lat));
			var marker = new BMapGL.Marker(new BMapGL.Point(119.331398, 39.897445));
            map.addOverlay(marker);
            geoc.getLocation(pt, function(rs){
                var addComp = rs.addressComponents;
                $('#result_l').text(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
            })
        })
		 */
		
		
		
		//首先，建立一個地圖例項
		var map = new BMapGL.Map("container");      
		//然後進行地圖初始化（用一個Point座標點和縮放級別來初始化地圖。）
		map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);   
		/*至此，地圖初始化完成*/
		
		// 建立地理編碼（地理解析器）例項      
		var myGeo = new BMapGL.Geocoder();      
		// 根據座標得到地址描述    下面輸入座標。
		myGeo.getLocation(new BMapGL.Point(113.364, 39.993), function(result){      
		    if (result){
				console.log(result);
		    alert(JSON.stringify(result.addressComponents));      
		    }      
		});
    </script>
</body>
</html>

相關文章