基于腾讯地图组件实现地图选点功能

最新推荐文章于 2025-03-22 11:43:05 发布

努力全栈的小鹿

最新推荐文章于 2025-03-22 11:43:05 发布

阅读量1.2k

点赞数 15

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/luhanglh/article/details/142895250

版权

使用到了腾讯地图官提供的组件，实现了地图选点

在这里插入图片描述

<template>
  <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>
</template>

<script setup>
import {
      ref } from 'vue'

const key = '自己申请到的Key'

window.addEventListener(
  'message',
  function (event) {
     
    // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
    var loc = event.data
    if (loc && loc.module == 'locationPicker') {
     
      //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
      // loc 这里面存放详细的位置信息
      emit('addressInfo', loc)
    }
  },
  true
)
</script>

<style lang="scss">
// 样式自己去修改，可以使用到样式渗透
:deep(.map-wrap) {
     
  height: 60%;
}
</style>