Vue实现地图选点功能,类似微信发送位置
遇到一个需求,需要用到类似微信发送位置选取位置的功能,看了高德地图的vue-amap文档,真是没法看呀
后选定腾讯地图 官方文档
地图组件
<template>
<div class="map">
<van-nav-bar left-arrow left-text="返回" title="选择地址" @click-left="$emit('hideMap')" />
<iframe id="mapPage" width="100%" height="100%" frameborder=0 :src="getSrc">
</iframe>
</div>
</template>
<script>
export default {
name: 'TxMap',
data() {
return {
keyName: '你的应用key名称',
mapKey: '你的应用key',
}
},
computed: {
getSrc() {
return 'https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=' + this.mapKey + '&referer=' + this.keyName
}
},
mounted() {
let self = this
window.addEventListener('message', function(event) {
// 接收位置信息,用户选择确认位置点后选点组件会触发该事件,回传用户的位置信息
const loc = event.data;
if (loc && loc.module === 'locationPicker') {//防止其他应用也会向该页面post信息,需判断module是否为'locationPicker'
self.$emit('callback', loc)
}
}, false)
}
}
</script>
<style scoped>
.map {
width: 100%;
height: 100%;
}
</style>
使用
<van-popup v-model="showMap" position="right" :style="{ height: '100%',width:'100%' }">
<tx-map @callback="callback" @hideMap="showMap = false"></tx-map>
</van-popup>