app定位公衆號小程序同步定位!

<script type="text/javascript" >
var is_weixin=<?php echo $is_weixin; ?>;
var sessionTime = "<?php echo $_SESSION['map']['time']?>";
var newTime = "<?php echo time()-1?>";
var user_long = "<?php echo $_SESSION['map']['lng'] ?>";
var user_lat =  "<?php echo $_SESSION['map']['lat'] ?>";
var myGeo = new qq.maps.Geocoder();
/*********地圖定位*********/

$(function(){
    get_near_shops(user_long,user_lat);
    window.addEventListener("message",function(event){
    var loctionDate = event.data;
        if (loctionDate && loctionDate.module == 'locationPicker') {
            searchPositionByLatLng(loctionDate.latlng.lat,loctionDate.latlng.lng);
        }
    }, false)

    function showmap(){
        $("#mapInfo").show();
        $("#mapInfo").css({
            'wdith':$(window).width(),
            'height':$(window).height(),
            'top':window.pageYOffset
        });
        $('.close').show();
        $("#mapPage").attr("src","https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=你自己的key");
    }
    $("#mapName").on("click",function(){
        showmap();
    })
    $(".close").bind("click",function(){
        $("#mapInfo").hide();
    });


function getUserLocalCityByIp(){
        var geolocation = new qq.maps.Geolocation("自己的key", "myapp");
        var options = {timeout: 9000};
        geolocation.getLocation(showPosition, showErr, options);
}
 function showErr(){
    alert('定位失敗');
 }
function showPosition(position){

    var addr = position.addr; //詳細地址
    var lat = position.lat; //
    var lng = position.lng; //火星座標 //TODO 實現業務代碼邏輯
     //searchPositionByLatLng(lat,lng)

    var sessionTime = "<?php echo $_SESSION['map']['time']?>";
    var newTime = "<?php echo time()-3600*5?>";
    if(!sessionTime || newTime > sessionTime){
        console.log(123);
        //getStore(lng,lat,addr);
        $("#mapName").html(sessionAddre);
         searchPositionByLatLng(lat,lng);
    }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 getUserLocalCityByIps(){
    if(!sessionTime || newTime > sessionTime){
        if(is_kingkr_obj()){
            //app定位
            getLocation('callbackmethod')
        }else if(is_weixin){
            //微信公衆號定位和小程序定位
            wx.ready(function () {
                wx.getLocation({
                    success: function (res) {
                        console.log(res);
                        var latitude = res.latitude;
                        var longitude = res.longitude;
                        searchPositionByLatLng(latitude,longitude);
                    },
                    cancel: function (res) {
                        alert('用戶拒絕授權獲取地理位置');
                    }
                });
            });
        }else{
            //瀏覽器定位
            showmap();
        }
    }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);
    }
}


getUserLocalCityByIps();
})

// 根據經緯度定位
function searchPositionByLatLng(lat,lng){
    var latLng = new qq.maps.LatLng(lat,lng);
    myGeo.getAddress(latLng);
    myGeo.setComplete(function(res){
        if(window.pageYOffset != 0){
            $(window).scrollTop(0);
            window.pageYOffset = 0;
        }
        get_near_shops(lng,lat);
        getStore(res.detail.location.lng,res.detail.location.lat,res.detail.addressComponents.district);
        $("#mapName").html(res.detail.addressComponents.district);
        $("#mapInfo").hide();
    })
}

function callbackmethod(result){
    result = JSON.parse(result);
    searchPositionByLatLng(result.Latitude,result.Longitude)
}
</script>

1先引入

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=你的key值(騰訊地圖)"></script>

 

2定位所要顯示的位置

 <div class="row">
        <div class="col-xs-6 current-addresss">
            <span class="glyphicon glyphicon-map-marker"></span>
            <a href="javascript:;" class="areaSelect" id="mapName"><?php echo $_SESSION['map']['addre'] ? $_SESSION['map']['addre'] :  "定位中.." ?></a>
            <span class="glyphicon glyphicon-menu-down"></span>
        </div>
    </div>

3地圖顯示

<div id="mapInfo" style="display: none; background: white;">
    <iframe id="mapPage" width="100%" height="100%" frameborder=0 src="javascript:;">   </iframe>
    <div class="close" style="position: absolute;">關閉</div>
</div>

4定位的script

在最上方!

親測沒有問題~

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