腾讯地图选点demo

在定位用户位置的时候,可能有时候定位不准确,或者说某些业务上,用户不想选中自己当前的位置,就会去选周边的位置
腾讯地图提供的地图选点的接口,可以让用户在地图上移动,选中自己想要的位置再返回给开发者

选点demo展示图

下面就是地图选点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>
Last modification:July 6th, 2019 at 05:24 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment

简爱博客