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

需求

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

过程

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

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

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

代码

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

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

总结

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