Vue项目中Google Maps JS API地图无法加载问题求助

核心问题排查 #

你的代码里有三个关键问题导致地图无法渲染：

1. 重复ID冲突 #

vue-google-autocomplete组件和地图容器都用了id="map"，浏览器中ID必须唯一，document.getElementById("map")会优先获取到autocomplete组件而非地图容器，地图初始化到错误元素上自然无法显示。

2. 异步数据未等待 #

getRealestateDataFromAddress是Vuex异步action，你直接在调用后立即初始化地图，此时getAddressToSearch的经纬度数据可能还未更新，导致地图无法定位。

3. 地图容器无尺寸 #

Google Maps需要容器有明确的宽高才能渲染，你的<div id="map">没有设置样式，默认高度为0，所以看不到地图。

修改后的代码示例 #

模板部分（修正ID和添加样式） #

<template>
  <div class="about">
    <div id="topInput">
      <div id="searchWrapper">
        <!-- 把autocomplete的ID改成唯一值 -->
        <vue-google-autocomplete id="address-autocomplete" country="us" classname="form-control" placeholder="Type an address..."
          v-on:placechanged="getAddressData">
        </vue-google-autocomplete>
        <button @click="getRealestateData" class="searchButton">
          Go
        </button>
      </div>
    </div>
    <div id="topImages">
      <property-images v-if="getPropertyData" :propImages="getPropertyData.propertyData.property_detail.photos" />
      <!-- 给地图容器添加唯一ID和样式 -->
      <div id="map-container" class="map-container"></div>
    </div>
    <div id="detailsContainer">
      <div id="detailsContent" v-if="getPropertyData">
        <span class="detailItem" v-for="dataPoint, key  in getPropertyData.propertyData.property_detail.prop_common">
          {{ `${key}: ${dataPoint}` }}
        </span>
      </div>
    </div>
  </div>
</template>

脚本部分（处理异步和修正地图初始化） #

<script>
import VueGoogleAutocomplete from "vue-google-autocomplete";
import propertyImages from '@/components/propertyImages.vue'
import axios from "axios";
import { mapActions, mapGetters, mapMutations } from "vuex";
import { Loader } from "@googlemaps/js-api-loader";

const loader = new Loader({
  apiKey: "AIzaSyB2blQxoDxnSYS2AB80m1k8nfLjeS0jtnU",
  version: "weekly",
});

export default {
  components: {
    VueGoogleAutocomplete,
    propertyImages
  },
  data() {
    return {
      street: "",
      zip: "",
      dataAPI: false,
      loading: false,
      qualifies: "-",
      isDisabled: true,
      address: ""
    };
  },
  computed: {
    ...mapGetters([
      'getPropertyData',
      'getAddressToSearch'
    ])
  },
  watch: {
    'errors.items'() {
      this.isDisabled = this.$validator.errors.items.length === 0;
    }
  },
  methods: {
    ...mapActions([
      'getRealestateDataFromAddress'
    ]),
    async getRealestateData() {
      console.log(this.address, this.getAddressToSearch);
      // 等待异步action完成，确保数据更新
      await this.getRealestateDataFromAddress();
      
      // 确认经纬度存在再初始化地图
      const { latitude, longitude } = this.getAddressToSearch;
      if (!latitude || !longitude) return;

      loader.load().then(() => {
        const myLatLng = { lat: Number(latitude), lng: Number(longitude) };
        // 用新的地图容器ID初始化地图
        const map = new google.maps.Map(document.getElementById("map-container"), {
          center: myLatLng,
          zoomControl: false, 
          mapTypeControl: false,
          zoom: 10,
        });
        new google.maps.Marker({
          position: myLatLng,
          map: map,
        });
      });
    },
    ...mapMutations([
      'setAddressToSearch'
    ]),
    getAddressData(addressData, placeResultData, id) {
      this.address = addressData;
      this.setAddressToSearch(addressData);
    },
    submit() {}
  },
  mounted() {
    this.$validator.validate();
  }
};
</script>

样式部分（添加地图容器尺寸） #

<style scoped>
.map-container {
  width: 100%;
  height: 400px; /* 根据需求调整高度 */
  border: 1px solid #eee;
  margin-top: 10px;
}
</style>

额外注意事项 #

• 确认Vuex的getAddressToSearch确实正确存储了经纬度数据，可以在await之后打印this.getAddressToSearch验证。
• 若loader重复加载，可判断window.google是否已存在再执行加载逻辑，避免重复请求API。
• 检查Google Maps API密钥是否启用了Maps JavaScript API，以及是否有配额限制。

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