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

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

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

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事件,从而获取位置信息并执行相应的逻辑。

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

相关推荐
人工智能训练师1 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny071 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy2 小时前
css的基本知识
前端·css
昔人'2 小时前
css `lh`单位
前端·css
Nan_Shu_6144 小时前
Web前端面试题(2)
前端
知识分享小能手4 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队5 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光5 小时前
css之一个元素可以同时应用多个动画效果
前端·css
huangql5205 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Days20505 小时前
LeaferJS好用的 Canvas 引擎
前端·开源