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

在最上方!

亲测没有问题~

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值