我正在嘗試在使用 typescript 的 Vue.js 專案上創建一個沒有第三方庫的谷歌地圖框，但我有些頭疼。在實踐中，我從官方網站https://developers.google.com/maps/documentation/javascript/using-typescript "npm i -D @ types / google.maps" 運行了命令，然后我輸入了下面的代碼，但是出現問題“'google' 未定義”。我不知道問題可能是什么。
這里的代碼
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,
});
}
},
};uj5u.com熱心網友回復：
有@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,
});
});
},
uj5u.com熱心網友回復：
如果您的專案是純打字稿，您使用的方式（以及谷歌網站上寫的內容）似乎是。
由于您正在處理 Vue，我建議您使用以下庫： https ://vue3-google-map.netlify.app/getting-started/#your-first-map
他們在那里有一個使用示例，我認為與 Vue3 一起使用它會比嘗試使其作業有更好的體驗。（您可能可以洗掉您當前安裝在您的 google 的東西package.json）
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/412481.html
標籤：