利用腾讯地图实现地图选点功能

基于腾讯地图实现地图选点

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

vue 复制代码

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

我是将这个代码封装成了组件，在使用的地方直接调用就可以.

其中:

js 复制代码

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

当这段代码被执行时，它会添加一个事件监听器，用于监听浏览器窗口的message事件。第一个参数是要监听的事件类型，这里是message，表示监听来自窗口的消息事件。

第二个参数是一个回调函数，当message事件被触发时，回调函数会被执行。

在回调函数中，它首先通过event.data获取传递过来的数据，并将其保存在一个变量loc中。

接下来，通过判断loc对象中的module属性是否为locationPicker来确定这个消息是否来自选点组件。这样做的目的是为了避免处理来自其他应用程序的消息。

如果条件满足，即该消息确实来自选点组件，则会触发一个自定义的事件addressInfo，并将loc对象作为参数传递给该事件。这可以通过一个emit函数来实现，该函数的作用是触发指定名称的事件，并传递相关的数据。这样其他部分的代码就可以订阅并处理addressInfo事件，从而获取位置信息并执行相应的逻辑。

当你在地图选点后点击下面的信息就能看到对应的数据了。