腾讯地图加定位!

  <!-- 定位地图 -->
<div id="mapInfo" style="display: none;background:white;">
<div class="close" style="background: #1379E7; text-align: center; width: 100%; height: 50px; line-height: 50px; font-size:   0.28rem; color: #fff; position: absolute; top: 0; left: 0; z-index: 600;">关闭</div>
      <iframe id="mapPage" width="100%" height="100%" frameborder=0
    src="javascript:;">
    </iframe>

</div>

引入地图插件

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=你的key"></script>
<script >
    var myGeo = new qq.maps.Geocoder();
    window.addEventListener("message",function(event){
        var loctionDate = event.data;
        if (loctionDate && loctionDate.module == 'locationPicker') {
         //防止其他应用也会向该页面post信息,需判断module是否为'locationPicker'
          // console.log('location', loctionDate);
          // console.log(loctionDate.latlng);
         searchPositionByLatLng(loctionDate.latlng.lat,loctionDate.latlng.lng);
        }
    }, false)
    $(function(){      
        getUserLocalCityByIp();
        $("#mapName").bind("click",function(){
            console.log("click");
            $("#mapInfo").show();
            $("#mapInfo").css("wdith",$(window).width());
            $("#mapInfo").css("height",$(window).height());
            $("html,body").css('overflow', 'hidden');
            $('.close').show();
            $("#mapPage").attr("src","https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=你的key");

        })
        $(".close").bind("click",function(){
            $("#mapInfo").hide();
            $("#mapPage").attr("src","javascript:;");
        });

    })

    // 根据ip定位用户当前位置
    function getUserLocalCityByIp(){
        var sessionTime = "<?php echo $_SESSION['map']['time']?>";

        var newTime = "<?php echo time()-3600*5?>";
        if(!sessionTime || newTime > sessionTime){
            var localCity = new qq.maps.CityService();
            localCity.searchLocalCity();
            localCity.setComplete(function(res){
                localCityLatLng = res.detail.latLng;
                myGeo.getAddress(localCityLatLng);
                myGeo.setComplete(function(res){
                    getStore(res.detail.location.lng,res.detail.location.lat,res.detail.addressComponents.district)
                    $("#mapName").html(res.detail.addressComponents.district);
                    // session
                })
                myGeo.setError(function(){
                    alert("定位失败mygeo");
                })
            })
            localCity.setError(function(res){
                alert("定位失败localcity");
            })
        }else{
            var sessionLng = "<?php echo $_SESSION['map']['lng'] ?>";
            var sessionLat = "<?php echo $_SESSION['map']['lat'] ?>";
            var sessionAddre = "<?php echo $_SESSION['map']['addre'] ?>";
            getStore(sessionLng,sessionLat,sessionAddre)
            $("#mapName").html(sessionAddre);
        }
    }

    // 根据经纬度定位
    function searchPositionByLatLng(lat,lng){
        var latLng = new qq.maps.LatLng(lat,lng);
        myGeo.getAddress(latLng);
        myGeo.setComplete(function(res){
        get_near_shops(lng,lat)
        getStore(res.detail.location.lng,res.detail.location.lat,res.detail.addressComponents.district,res.detail.addressComponents.streetNumber);
        console.log(res.detail.addressComponents.streetNumber);
        if(res.detail.addressComponents.streetNumber){
            $("#mapName").html(res.detail.addressComponents.streetNumber);
        }else{
            $("#mapName").html(res.detail.addressComponents.district);
        }

            $("#mapInfo").hide();
        })
    }

</script>

猜你喜欢

转载自blog.csdn.net/xunhuanxiaogongzhu/article/details/82014362