騰訊map api,經緯度逆向geocoder解析地址,實時更新位置demo

直接上代碼:需要將自己的map key加到下面js引用位置。本人親測可用。搞了半天,大家多支持阿!

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>  
  <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key="></script>
    <style type="text/css">
        html,
        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
        #container {
            width: 100%;
            
        }
        body div {
            
        }
        #container {
           
           height:450px;
        }
    </style>
</head>

<body onload="init()">
    <div id="container" ></div>
    
    <div id="fitBoundsDiv"></div>
    <div id="tips" style="padding:10px 10px;height:20px;color:#888;font-size:12px;">
  溫馨提醒:可以拖動地圖調整當前位置
 </div>
    <div id="centerDiv" style="padding:10px 10px;height:40px;"></div>
    <div style="height: 38px;"><button>One Key</button></div>
    <div id="zoomDiv"></div>
    <div id="containerDiv"></div>
    <div id="mapTypeIdDiv"></div>
    <div id="projection"></div>

    <script type="text/javascript">
        var jqqGeocoder = null;
        function triggerGeocoder(center){
            if(jqqGeocoder){
                //逆向解析地址
                jqqGeocoder.getAddress(center);
            }
        }
        function init() {
            var width = $("#container").width();
            var height = $("#container").height();
          
            var container = document.getElementById("container");
            var centerDiv = document.getElementById("centerDiv");

            //初始化地圖
            var center = new qq.maps.LatLng(39.911495541850535, 116.40345412944171);
            var map = new qq.maps.Map(container, {
                // 地圖的中心地理座標
                center: center,
                zoom: 16
            });
            
            //逆向獲取地址信息
          jqqGeocoder = new qq.maps.Geocoder({
              complete : function(result){
                  //更新form地址
                  //$("#address").val(result.detail.address);
                  //alert(result.detail.address);
                  //debugger;
                  centerDiv.innerHTML = "當前定位:<br>"+result.detail.address;
                  //console.log(result.detail.location);
              }
          });
      
          triggerGeocoder(center);
            
            map.panTo(center);
          //創建自定義控件
           
           var middleControl = document.createElement("div");
            middleControl.style.left= ((width)/2-20)+"px";
            middleControl.style.top=(height/2-38)+"px";
            middleControl.style.position="relative";
            middleControl.style.width="36px";
            middleControl.style.height="36px";
            middleControl.style.zIndex="100000";
           middleControl.innerHTML ='<img src="https://www.cdlhome.com.sg/mobile_assets/images/icon-location.png" />';
           document.getElementById("container").appendChild(middleControl);
            //返回地圖當前中心點地理座標
            //centerDiv.innerHTML = "地址定位中..." + map.getCenter();
            centerDiv.innerHTML = "地址定位中......";
            //當地圖中心屬性更改時觸發事件
            qq.maps.event.addListener(map, 'center_changed', function() {
                setTimeout(function(){
                    triggerGeocoder(map.getCenter());
                },2000);
               
                centerDiv.innerHTML = "地址定位中...";
            });
        }
    </script>
</body>

</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章