Vue.js 3中Google Map多标记不显示问题求助及代码示例

问题排查与修复步骤 #

1. 调整地图视野，覆盖所有标记 #

你的标记分布在巴基斯坦和德国两个完全独立的区域，当前地图中心设置在巴基斯坦、缩放级别为10，德国的标记不在当前可视范围内，所以无法看到。可以通过两种方式解决：

方式一：自动适配所有标记边界

在组件的mounted钩子中计算所有标记的地理边界，让地图自动调整视野：

mounted() {
  const bounds = new google.maps.LatLngBounds();
  this.markers.forEach(marker => {
    bounds.extend(new google.maps.LatLng(marker.position.lat, marker.position.lng));
  });
  // 获取地图实例并应用边界
  this.$refs.map.$mapPromise.then(map => {
    map.fitBounds(bounds);
  });
}

同时给GMapMap添加ref属性：

<GMapMap
  ref="map"
  :center="center"
  :zoom="10"
  map-type-id="terrain"
  style="width: 100%; height: 500px;"
>

方式二：手动调整初始中心与缩放

如果不需要自动适配，可将初始中心设置在两个区域的中间位置，同时调大缩放级别：

center: { lat: 38.0, lng: 37.0 }, // 大致处于两个区域的中间点
zoom: 3

2. 优化v-for的key值 #

避免使用index作为v-for的key，改用标记位置的唯一组合，防止组件复用导致的异常：

<GMapMarker
  :key="`${m.position.lat}-${m.position.lng}`"
  v-for="m in markers"
  :position="m.position"
  :clickable="true"
  :draggable="true"
  @click="center = m.position"
/>

3. 排除集群组件的影响 #

先暂时移除GMapCluster组件，直接渲染标记，确认标记是否能正常显示：

<GMapMap
  ref="map"
  :center="center"
  :zoom="3"
  map-type-id="terrain"
  style="width: 100%; height: 500px;"
>
  <GMapMarker
    :key="`${m.position.lat}-${m.position.lng}`"
    v-for="m in markers"
    :position="m.position"
    :clickable="true"
    :draggable="true"
    @click="center = m.position"
  />
</GMapMap>

如果标记能正常显示，再重新配置GMapCluster组件。

4. 确认组件配置正确性 #

确保已正确安装vue3-google-map，并在项目中配置Google Maps API密钥，且集群组件依赖的visualization库已加载：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import GoogleMap from 'vue3-google-map'

createApp(App)
  .use(GoogleMap, {
    load: {
      key: '你的Google Maps API密钥',
      libraries: ['visualization'] // 集群组件依赖该库
    }
  })
  .mount('#app')

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