带有@ GoogleMaps /js的Vue.js googlemaps API -加载程序
带有@ GoogleMaps /js的Vue.js googlemaps API -加载程序
提问于 2022-02-19 00:27:19
谢谢你阅读我的问题:)
我试图在我的GoogleMaps项目中实现Vue.js，并使用@googlemaps/js加载器(来自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>但是地图没有显示，只有弹出窗口，地图无法正确加载。在控制台中发生此错误: typeError: this.set不是一个函数。(在'this.set("renderingType"，“UNINITIALIZED”)中，'this.set‘是未定义的)有人知道如何让它运行(最好是在<script setup>中)吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2022-02-23 01:03:14
尝试添加这样的新：
map.value = new google.maps.Map(document.getElementById('map'), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8
})Stack Overflow用户
发布于 2022-08-12 17:33:42
必须使用id映射在div中指定宽度和高度。
<template>
<div class="map" id="map" style="width: 300px;height: 200px;" ></div>
</template>Stack Overflow用户
发布于 2022-06-20 04:02:18
如果它不起作用，也试试这个吧：
map.value = new window.google.maps.Map(document.getElementById('map'), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71181320
复制相关文章
相似问题
腾讯云开发者
