VUE中调用腾讯地图选点

项目使用的是element-plus vue3 开发 首先在template中做一个弹窗

<el-dialog v-model="showMap" title="选择地址" width="50%">
            <div>
                <iframe frameborder=0 width="100%" height="500px"
                    src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=XXXX-XXXXX-XXXX-XXXX-XXX&referer=myapp">
                </iframe>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="showMap = false">
                        确定选择
                    </el-button>
                </span>
            </template>
        </el-dialog>

其中KEY填写在腾讯地图开放平台申请到的KEY， 然后JS中定义控制显示/隐藏的变量

const showMap = ref(false)

页面上添加按钮控制该变量即可实现显示，隐藏地图了

最后，添加监听把获取到的地址及坐标填入input就可以了

onMounted(() => {
    window.addEventListener('message', function (event) {
        // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
        var location = event.data;
        if (location && location.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
            console.log('location', location);
            formData.address = location.poiaddress
            formData.lng = location.latlng.lng
            formData.lat = location.latlng.lat
        }
    }, false);
})