vue3使用高德地图获取经纬度

首先 安装依赖

cnpm i @amap/amap-jsapi-loader --save

<script setup>
import { onMounted, reactive, ref } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'

const map = ref(null)
const mapData = reactive({
  map: {},
  keyword: '',
  selectedLocation: {},
  selectedAddress: '',
  marker: null, // 用于存储选中位置的标记
})
const lng = ref(0)
const lat = ref(0)
onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: '', // 密钥
  }

  AMapLoader.load({
    key: '', // key值
    version: '1.4.15',
    plugins: ['AMap.PlaceSearch'],
  })
    .then((AMap) => {
      const mapInstance = new AMap.Map('container', {
        viewMode: '2D',
        zoom: 11,
        center: [116.397033, 39.917606],
        layers: [
          new AMap.TileLayer.RoadNet(),
          new AMap.TileLayer.WMS({
            url: 'https://ahocevar.com/geoserver/wms',
            blend: false,
            tileSize: 512,
            params: {
              LAYERS: 'topp:states',
              VERSION: '1.3.0',
            },
          }),
        ],
        scrollWheel: true, // 启用滚动缩放
      })

      mapInstance.on('click', (e) => {
        lng.value = e.lnglat.getLng()
        lat.value = e.lnglat.getLat()

        // 移除之前的标记
        if (mapData.marker) {
          mapData.marker.setMap(null)
        }

        // 创建新的标记
        const marker = new AMap.Marker({
          position: [lng.value, lat.value],
          icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // 选中位置的图标
          offset: new AMap.Pixel(-15, -30), // 调整图标的偏移位置
        })

        // 将标记添加到地图
        marker.setMap(mapInstance)

        // 存储选中位置的标记
        mapData.marker = marker

        // 将地图中心设置为选中位置
        mapData.map.setCenter([lng.value, lat.value])
      })

      mapData.map = mapInstance
    })
    .catch((e) => {
      console.log(e)
    })
})

function search() {
  if (mapData.keyword) {
    AMapLoader.load({
      key: '',
      version: '1.4.15',
      plugins: ['AMap.PlaceSearch'],
    })
      .then((AMap) => {
        const placeSearch = new AMap.PlaceSearch({
          city: '全国', // 请根据实际情况设置城市
          map: mapData.map,
        })
        placeSearch.search(mapData.keyword, (status, result) => {
          console.log(result) // 输出完整的搜索结果

          if (status === 'complete') {
            const pois = result.poiList.pois
            if (pois.length > 0) {
              const { location } = pois[0]

              // 移除之前的标记
              if (mapData.marker) {
                mapData.marker.setMap(null)
              }

              // 创建新的标记
              const marker = new AMap.Marker({
                position: location,
                icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
                offset: new AMap.Pixel(-15, -30),
              })

              // 将标记添加到地图
              marker.setMap(mapData.map)

              // 存储选中位置的标记
              mapData.marker = marker

              // 将地图中心设置为选中位置
              mapData.map.setCenter(location)
            }
          }
          else {
            console.log('搜索失败或无结果')
          }
        })
      })
      .catch((e) => {
        console.log(e)
      })
  }
}

function zoomIn() {
  mapData.map.zoomIn()
}

function zoomOut() {
  mapData.map.zoomOut()
}
</script>

<template>
  <div>
    <input v-model="mapData.keyword" style="width: 80%; height: 30px;" @keydown.enter="search">
    <button @click="search">
      搜索
    </button>
    <button @click="zoomIn">
      放大
    </button>
    <button @click="zoomOut">
      缩小
    </button>
    <div id="container" class="map" style="height: 400px; border-radius: 5px;" />
    <div>经度：{{ lng }}</div>
    <div>经度：{{ lat }}</div>
  </div>
</template>

<style scoped>
  .map {
    width: 100%;
  }
</style>