Vue3开发中vue2-google-map的替代方案及事件失效问题咨询

替代组件推荐 #

• @fawmi/vue-google-maps：专为Vue3适配的Google Maps组件库，支持Composition API，事件处理符合Vue3规范，与原vue2-google-map用法相近，迁移成本低。
• 原生Google Maps JavaScript API：无需依赖第三方组件，灵活性更高，适合复杂定制场景。

迁移解决步骤（以@fawmi/vue-google-maps为例） #

1. 安装组件 #

npm install @fawmi/vue-google-maps
# 或
yarn add @fawmi/vue-google-maps

2. 全局配置API密钥 #

在main.js中配置Google Maps API密钥：

import { createApp } from 'vue'
import App from './App.vue'
import VueGoogleMaps from '@fawmi/vue-google-maps'

const app = createApp(App)
app.use(VueGoogleMaps, {
  load: {
    key: '你的Google Maps API密钥',
    libraries: 'places', // 根据需求添加所需库，如geometry、drawing等
  },
})
app.mount('#app')

3. 改造原组件代码 #

由于vue2-google-map未适配Vue3事件系统，原@center_changed这类下划线命名的事件无法触发，改用组件的@ready事件获取实例后绑定原生Google Maps事件：

<template>
  <GMapMap
    :center="newCenter"
    :zoom="zoom"
    mapTypeId="roadmap"
    style="width: 100%; height: 30vh; min-width: 300px"
    @ready="onMapReady"
  >
    <GMapMarker
      :icon="{ url: './static/marker3.png' }"
      :position="newPosition"
      :clickable="false"
      :draggable="true"
      @ready="onMarkerReady"
    />
    <GMapCircle
      :center="newCircleCenter"
      :radius="getNewRadius"
      :options="{
        strokeColor: colors.getColor('MAP_ACCENT'),
        strokeOpacity: 1,
        strokeWeight: 1,
        fillColor: colors.getColor('MAP_ACCENT'),
        fillOpacity: 0.4
      }"
    />
  </GMapMap>
</template>

<script setup>
import { ref } from 'vue'

// 定义原有的响应式变量
const newCenter = ref({ lat: 0, lng: 0 })
const zoom = ref(10)
const newPosition = ref({ lat: 0, lng: 0 })
const newCircleCenter = ref({ lat: 0, lng: 0 })
const getNewRadius = ref(500)

// 地图就绪后绑定原生center_changed事件
const onMapReady = (mapInstance) => {
  mapInstance.addListener('center_changed', () => {
    const center = mapInstance.getCenter()
    newCenter.value = { lat: center.lat(), lng: center.lng() }
    updateCenter()
  })
}

// 标记就绪后绑定原生position_changed事件
const onMarkerReady = (markerInstance) => {
  markerInstance.addListener('position_changed', () => {
    const position = markerInstance.getPosition()
    newPosition.value = { lat: position.lat(), lng: position.lng() }
    changePosition()
  })
}

// 原业务逻辑方法
const updateCenter = () => {
  // 你的业务处理代码
}

const changePosition = () => {
  // 你的业务处理代码
}
</script>

原生API方案（无组件依赖） #

如果不需要第三方组件，可直接调用Google Maps原生API：

1. 在index.html中引入API：

<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=places"></script>

2. 组件内封装实现：

<template>
  <div ref="mapContainer" style="width: 100%; height: 30vh; min-width: 300px"></div>
</template>

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

const mapContainer = ref(null)
let mapInstance = null
let markerInstance = null

onMounted(() => {
  // 初始化地图
  mapInstance = new google.maps.Map(mapContainer.value, {
    center: newCenter.value,
    zoom: zoom.value,
    mapTypeId: 'roadmap'
  })

  // 绑定地图事件
  mapInstance.addListener('center_changed', () => {
    const center = mapInstance.getCenter()
    newCenter.value = { lat: center.lat(), lng: center.lng() }
    updateCenter()
  })

  // 创建标记
  markerInstance = new google.maps.Marker({
    position: newPosition.value,
    map: mapInstance,
    icon: { url: './static/marker3.png' },
    clickable: false,
    draggable: true
  })

  // 绑定标记事件
  markerInstance.addListener('position_changed', () => {
    const position = markerInstance.getPosition()
    newPosition.value = { lat: position.lat(), lng: position.lng() }
    changePosition()
  })

  // 创建圆
  new google.maps.Circle({
    center: newCircleCenter.value,
    radius: getNewRadius.value,
    map: mapInstance,
    options: {
      strokeColor: colors.getColor('MAP_ACCENT'),
      strokeOpacity: 1,
      strokeWeight: 1,
      fillColor: colors.getColor('MAP_ACCENT'),
      fillOpacity: 0.4
    }
  })
})

// 响应式变量及业务方法同前
const newCenter = ref({ lat: 0, lng: 0 })
const zoom = ref(10)
const newPosition = ref({ lat: 0, lng: 0 })
const newCircleCenter = ref({ lat: 0, lng: 0 })
const getNewRadius = ref(500)

const updateCenter = () => { /* 业务代码 */ }
const changePosition = () => { /* 业务代码 */ }
</script>

内容的提问来源于stack exchange，提问作者Stefan Ilikiov