一個專案，需要開啟地圖後點選獲取地址
用的騰訊地圖開放平臺，對著文件花了一上午弄出來了
程式碼：
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>前端定位模組</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
 <style>
     #pos-area{
         height:500px;
         width: 100%;
     }
     #poi_lat{color:red;}
     #poi_lng{color:green;}
     #poi_address{color:blue;}
 </style>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original=""></script>
    <script charset="utf-8" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
    <script type="text/javascript"
        class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
</head>

<body>
    <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('');
                    }

                })
}

 
</script>
</body>

</html>
效果圖：
備註：微信裡打的話需要用https地址才能取得許可權，在手機瀏覽器開啟就可以不用了,還有記得在騰訊控制檯那裡把webserviceapi開啟並加上域名
預覽地址：https://www.niunan.net/qqmapdemo.html
騰訊地圖定位及座標解析

相關文章
