天天看點

騰訊地圖定位及坐标解析

<h1>騰訊地圖測試</h1>
<div>您在當的位置(經度:<span id="now_lat"></span>,緯度:<span id="now_lng"></span>)<button type="button"
        onclick="geolocation.getLocation(showPosition, showErr, options)">擷取目前位置</button></div>
        <div>您點選的位置(經度:<span id="poi_lat"></span>,緯度:<span id="poi_lng"></span>,解析出來的位址:<span id="poi_address"></span>)</div>
<div id="pos-area">

</div>

<script type="text/JavaScript">
var appkey ="A4KBZ-LUZE3-VPW3T-YGU5N-SIT2S-5ZFVH";           

var geolocation = new qq.maps.Geolocation(appkey, "myapp");

var options = {timeout: 8000};

$(function(){

//加載完成後就取目前位置 
geolocation.getLocation(showPosition, showErr, options);           

})

function showPosition(position) {
        console.log(position);
        $('#now_lat').html(position.lat);
        $('#now_lng').html(position.lng);
        $('#poi_lat').html(position.lat);           

$('#poi_lng').html(position.lng);

//取出位置坐标了,設定地圖顯示出來
        var map = new qq.maps.Map(document.getElementById("pos-area"), {
            // 地圖的中心地理坐标。
            center: new qq.maps.LatLng(position.lat,position.lng),
            zoom:15
        });
        //添加标記
        var marker = new qq.maps.Marker({
            position:  new qq.maps.LatLng(position.lat,position.lng),
            map: map
        });
        //解析位址
        jiexiaddress(position.lat,position.lng);
        //綁定地圖點選事件
        qq.maps.event.addListener(map, "click", function (e) {
            $('#poi_lat').html(e.latLng.getLat().toFixed(6));
            $('#poi_lng').html(e.latLng.getLng().toFixed(6));
            //先移除标記,再添加标記
            marker.setMap(null);
            marker = new qq.maps.Marker({
                position:  new qq.maps.LatLng(e.latLng.getLat(),e.latLng.getLng()),
                map: map
            });
           jiexiaddress(e.latLng.getLat(),e.latLng.getLng());
        });
    };

    function showErr() { 
        alert("定位失敗!"); 
    };
           

//解析位址

function jiexiaddress(lat,lng){

var  url3 = encodeURI("https://apis.map.qq.com/ws/geocoder/v1/?location=" + lat + "," + lng + "&key="+appkey+"&output=jsonp&&callback=?");
            $.getJSON(url3, function (result) {
                if(result.result!=undefined){
                    $('#poi_address').html(result.result.address);
                }else{
                    $('#poi_address').html('');
                }

            })           

}

繼續閱讀