'google' 未在带有 Google 地图的 Vue.Js 项目中定义

Question

我正试图在使用typescript的Vue.js项目上创建一个没有第三方库的谷歌地图框，但我遇到了一些麻烦。在实践中，我在官方网站上运行命令https://developers.google.com/maps/documentation/javascript/using-typescript"；npm i-D@types/google.maps"；，我输入了下面的代码谷歌"未定义"；发生。我不知道可能是什么问题。

这里的代码

export default {
mounted: function () {
let map: google.maps.Map;
const center: google.maps.LatLngLiteral = { lat: 30, lng: -110 };
function initMap(): void {
map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
center,
zoom: 8,
});
}
},
};

Answer 1

有@types/google.maps，然后是需要加载的实际API。

import { Loader } from '@googlemaps/js-api-loader';
mounted: function () {
const loader = new Loader({
apiKey: "",
version: "weekly",
libraries: ["places"]
});
let map: google.maps.Map;
const center: google.maps.LatLngLiteral = { lat: 30, lng: -110 };
loader.load().then(() => { map = new 
google.maps.Map(document.getElementById("map") as HTMLElement, {
center,
zoom: 8,
});
});

},

Answer 2

您使用的方式(以及在谷歌网站上写的内容(似乎是您的项目是否是纯类型脚本。

由于您正在处理Vue，我建议您使用以下库：https://vue3-google-map.netlify.app/getting-started/#your-第一张地图

他们有一个使用的例子，我认为你在Vue3中使用它会比尝试让它发挥作用有更好的体验。(你可能可以删除你目前安装在package.json中的谷歌内容(