VUE3 腾讯地图 拾取坐标

VUE3 腾讯地图 拾取坐标 (选地)

1. 注册key

https://lbs.qq.com/dev/console/application/mine (腾讯地图)

2. 具体代码

<div class="map-picker-container">
  <div id="mapContainer" class="map-container"></div>
  <!-- <div class="coordinate-info">
    当前坐标：{{ state.latitude }}, {{ state.longitude }}
  </div> -->
</div>

    const MAP_KEY = 'XXX-XXX-XXXX-XXXX'
    const visibleModel = ref(true)
    const state = reactive({
      mapObj: null,
      markerObj: null,
      latitude: null,
      longitude: null
    })
    onMounted(() => {
      const containerId = 'mapContainer'
      const TencentMapSDK = document.createElement('script')
      TencentMapSDK.src = `https://map.qq.com/api/js?v=2.exp&key=${MAP_KEY}&callback=initMapSDK`
      document.head.appendChild(TencentMapSDK)
      console.log(123456)
      window.initMapSDK = () => {
        // eslint-disable-next-line no-undef
        state.mapObj = new qq.maps.Map(document.getElementById(containerId), {
          // eslint-disable-next-line no-undef
          center: new qq.maps.LatLng(36.622438, 101.78043),
          zoom: 12
        })

        // eslint-disable-next-line no-undef
        qq.maps.event.addListener(state.mapObj, 'click', (event) => {
          const location = event.latLng
          state.latitude = location.getLat().toFixed(6)
          state.longitude = location.getLng().toFixed(6)

          if (!state.markerObj) {
            // eslint-disable-next-line no-undef
            state.markerObj = new qq.maps.Marker({
              position: location,
              map: state.mapObj
            })
          } else {
            state.markerObj.setPosition(location)
          }
        })
      }
    })

    const handleOk = () => {
      if (state.latitude && state.longitude) formState.coordinate = `${state.latitude},${state.longitude}`
    }

<style lang="scss">
.map-picker-container {
  display: flex;
  flex-direction: column;
}
.map-container {
  height: 500px;
}
.coordinate-info {
  margin-top: 10px;
  text-align: center;
}