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

小鹿小陆
1,822 阅读3分钟

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

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

image.png

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

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

其中:

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

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

image.png

基于腾讯地图实现地图选点功能(手写)

这是最终实现的效果:

image.png 有时候的腾讯地图组件的选点功能会稳定，或者失效，显示列表更新失败这就导致可能用户使用感受较差，有时候就必须手写一份，下面的代码是手写的代码以及对应的代码说明：👇👇👇👇

1.首先你需要在项目的html文件引入腾讯地图(vue3的项目)

image.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=这里是你申请的key"></script>
  </body>
</html>
  1. 将地图选点功能封装成组件，实现代码的高复用。
<template>
  <div>
    <div class="container" id="container">
      <img class="coordinate" src="@/assets/坐标.png" alt="图片加载失败" />
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue'
import axios from 'axios'

//地图
const dataMap = reactive({
  map: '',
  markerLayer: '',
  latitude: '', //纬度
  lngitude: '', //经度
})

onMounted(() => {
  getlocation()  //获取经纬度
  initMap()  // 初始化地图
})

//初始化地图
const initMap = () => {
  dataMap.map = new qq.maps.Map(document.getElementById('container'), {
    center: new qq.maps.LatLng(45.190524, 124.797766), //设置地图中心点坐标
    zoom: 20, //设置地图缩放级别
  })
  qq.maps.event.addListener(dataMap.map, 'center_changed', center_changed)
}
// 监听地图拖动获取经纬度
const center_changed = () => {
  dataMap.latitude = dataMap.map.getCenter().lat
  dataMap.lngitude = dataMap.map.getCenter().lng
  console.log('选点后的经纬度：', dataMap.latitude, dataMap.lngitude)
}

//获取经纬度
const getlocation = async () => {
  const res = await axios.get('/api', {
    params: {
      key: '自己申请的key',
    },
  })
  dataMap.map.setCenter(new qq.maps.LatLng(res.data.result.location.lat, res.data.result.location.lng))
}
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  margin: 50px;
  width: 800px;
  height: 400px;
  border: 1px solid #999;

  .coordinate {
    z-index: 9999;
    position: relative;
    top: 50%;
    left: 50%;
  }
}
</style>
  1. 其中中心点的图片是自己设置上的，下面给提供了这个图片的地址，大家可以下载使用

坐标.png 图片地址:img1.imgtp.com/2023/11/08/…

中心点的位置是根据定位设置的，如果大家使用的容器的宽度和高度和我的不一样，需要手动的设置。

avatar
文章
阅读
粉丝