vue 公众号 使用腾讯地图的 地图选点组件 实现定位、搜索、选择地址

需求

公众号要做一个选择收货地址的功能，要求跳转到地图页面，自动定位当前位置，可搜索位置也可直接选择地图上的点。

过程

搜索了一些文章，发现有一些是通过调用微信的获取定位接口再结合其他地图（高德、百度）实现的，还发现一种方式，是直接使用腾讯地图的地图选点组件。

查看腾讯地图的地图选点组件实例，自己扫码试了一下，发现这个不管是在开发上还是页面体验上都比较简单易用，页面效果如下。

官方文档：腾讯地图 ---- 地图选点组件

代码

1.引入腾讯地图，无需安装，直接在 index.html 加上这一行

<script src="https://map.qq.com/api/gljs?v=1.exp&key=你申请的key值"></script> 

2.在page文件夹新建一个地图页面 map.vue

<template>
    <div class="main" id="container">
        <iframe id="mapPage" width="100%" height="100%" frameborder=0
            src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=你申请的key值&referer=myapp">
        </iframe>
    </div>
</template>

<script>
export default {
    data(){
        return{
        }
    },
    created(){
        // this.initMap();
        this.listen();
    },
    methods:{
        // initMap() { // 如果想把地图的中心固定，可以使用这个方法，我这里要求自动定位到当前位置，所以不做这个初始化处理
        //     console.log("map")
        //     //定义地图中心点坐标
        //     var center = new TMap.LatLng(39.984120, 116.307484)
        //     //定义map变量，调用 TMap.Map() 构造函数创建地图
        //     var map = new TMap.Map(document.getElementById('container'), {
        //         center: center,//设置地图中心点坐标
        //         zoom: 17.2,   //设置地图缩放级别
        //         pitch: 43.5,  //设置俯仰角
        //         rotation: 45    //设置地图旋转角度
        //     });
        // },
        listen() {
            window.addEventListener('message', function(event) {
                // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
                var loc = event.data;
                if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
                    console.log('location', loc); // 获取的选中的地址数据
                }
                return false
            }, false);
        }
    },
}
</script>

<style lang="less" scoped>
    .main{
        width:100%;
        height:100%;
    }
</style>

总结

• 这种方式简单又易用，无需自己调用微信的获取本地位置的接口，组件本身就什么都给处理好了，会自动调用微信的获取位置经纬度接口等。
• 如果要在开发者工具上测试，会不能准确的获取当前位置，内部调用微信获取位置接口时，会报63002错误，但是在手机上正式环境测试没问题的。
• 开发者工具测试时，选择地址后会弹出地址结果的弹窗，在手机上测试不会有弹窗弹出，可获取数据自由处理跳转。