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

1.参考腾讯位置服务手册中的地图选点组件地图组件 | 腾讯位置服务

<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'
      console.log('location', loc) // 这里面存放详细的位置信息
    }
  },
  true
)
</script>

<style lang="scss">
:deep(.map-wrap) {
  height: 60%;
}
</style>

2. 自己引入腾讯地图实现地图选点功能

• 在项目的出口文件index.html中引入腾讯位置服务

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=自己申请的key"></script>

3.初始化地图

//地图
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))
}