<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
在最上方!
親測沒有問題~