谷歌地图vue错误无法解析组件

Question

在我的项目中使用谷歌地图，但运行时不解析组件 使用地图在网络应用程序中查找位置

main.js：

import  VueGoogleMaps from "@fawmi/vue-google-maps";

const app = createApp(App);
app.use(router, VueGoogleMaps, {
  load: {
    key: "AIzaSyBgZQnzu6qVojrFAi_qLQFGMsLYsACLvZk",
},

}),
  app.mount("#app");

在组件中：

<template>
    <GMapMap
        :center="center"
        :zoom="7"
        map-type-id="terrain"
        style="width: 500px; height: 300px"
    >
      <GMapCluster>
        <GMapMarker
            :key="index"
            v-for="(m, index) in markers"
            :position="m.position"
            :clickable="true"
            :draggable="true"
            @click="center=m.position"
        />
      </GMapCluster>
    </GMapMap>
  </template>
  <script>
  export default {
    name: 'Gmap',
    data() {
      return {
        center: {lat: 51.093048, lng: 6.842120},
        markers: [
          {
            position: {
              lat: 51.093048, lng: 6.842120
            },
          }
        ]
      }
    }
  }
  </script>

有很多问题但不起作用 //////////////////////////////////////////////////////////////////////////////////////////////////////

Answer 1

该版本有问题。尝试降级到较低版本。

按如下方式更新您的 package.json：

"@fawmi/vue-google-maps": "0.9.67" 删除node_modules文件夹并运行

npm install

在发布问题之前，请尝试将图书馆钥匙收好。

我希望这有帮助