在定位用户位置的时候，可能有时候定位不准确，或者说某些业务上，用户不想选中自己当前的位置，就会去选周边的位置
腾讯地图提供的地图选点的接口，可以让用户在地图上移动，选中自己想要的位置再返回给开发者
下面就是地图选点demo完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<div id="dingwei" style="width: 100px;height: 100px;background: red;"></div>
<div id="test" style="height:100%;z-index: 1111;">
<iframe id="mapPage" width="100%" height="100%" frameborder="0" src=""></iframe>
</div>
</body>
<script src="https://cdn.nikm.cn/js/jquery.js"></script>
<script>
$("#dingwei").click(function(){
$('#test').show();
$('#dingwei').hide();
$('#test').css('height',window.screen.availHeight);
if($("iframe").attr("src") == ''){
$("iframe").attr("src","https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=4UGBZ-62SWP-HJRDU-V6Q4W-HS4XQ-5EFKG&referer=myapp");
}
});
window.addEventListener('message', function(event) {
// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
var loc = event.data;
if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
console.log(loc);
console.log(loc.latlng.lat);
console.log(loc.latlng.lng);
console.log(loc.poiaddress);
$('#test').hide();
$('#dingwei').show();
}
}, false);
</script>
</html>
版权属于：本文是原创文章，版权归 吾梦小站 所有。
本文链接：https://nikm.cn/archives/14.html
本站所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由地转载和修改，但请务必注明文章来源并且不可用于商业目的。
