感谢阅读我的问题:)
我正在尝试在我的 Vue.js 项目中实现 GoogleMaps 并使用 @googlemaps/js-api-loader(来自 https://developers.google.com/maps/documentation/javascript/overview#javascript)
我的代码如下所示:
<script setup>
import { onMounted, ref } from 'vue'
import { Loader } from '@googlemaps/js-api-loader'
const loader = new Loader({
apiKey: '',
version: 'weekly',
libraries: ['places']
})
const map = ref([])
onMounted(async () => {
await loader
.load()
.then(google => {
map.value = google.maps.Map(document.getElementById('map'), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8
})
})
.catch(error => {
console.log(error)
})
.then(function () {
// always executed
})
})
</script>
<template>
<div
id="map"
class="map"
/>
</template>
<style>
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
但是 map 没有显示,只有那个弹出窗口, map 无法正确加载。
在控制台中出现此错误:
typeError: this.set 不是一个函数。 (在 'this.set("renderingType","UNINITIALIZED")' 中,'this.set' 未定义)
有谁知道如何让它运行(最多在 <script setup>
中)?
最佳答案
尝试像这样添加新的:
map.value = new google.maps.Map(document.getElementById('map'), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8
})
关于javascript - Vue.js 谷歌地图 API 与 @googlemaps/js-api-loader,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71181320/