需求
公众号要做一个选择收货地址的功能,要求跳转到地图页面,自动定位当前位置,可搜索位置也可直接选择地图上的点。
过程
搜索了一些文章,发现有一些是通过调用微信的获取定位接口再结合其他地图(高德、百度)实现的,还发现一种方式,是直接使用腾讯地图的地图选点组件。
查看腾讯地图的地图选点组件实例,自己扫码试了一下,发现这个不管是在开发上还是页面体验上都比较简单易用,页面效果如下。
代码
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错误,但是在手机上正式环境测试没问题的。
- 开发者工具测试时,选择地址后会弹出地址结果的弹窗,在手机上测试不会有弹窗弹出,可获取数据自由处理跳转。