在Nuxt.js中，加载一个简单的谷歌地图

Question

我在另一个项目上成功地做到了这一点，我完全不明白为什么我在这里得到了一个空的div而不是一个映射。地图应该在这里呈现：

<template>
<div class="row mt-5">
<div style="height: 500px; width: 500px;" ref="map"></div>
</div>
</template>

代码：

head() {
return {
title: 'Properties',
script: [{
src: "https://maps.googleapis.com/maps/api/js?key=XXX",
hid: "map", 
defer: true,
}]
}
},
mounted(){
const mapOptions = {
zoom: 18,
center: new window.google.maps.LatLng(43.758773, -79.391785),
disableDefaultUI: true,
zoomControl: true
};
const map = new window.google.maps.Map(this.$refs.map, mapOptions);
const position = new window.google.maps.LatLng(43.758773, -79.391785)
const marker = new window.google.maps.Marker({ position })
marker.setMap(map)
},

Answer 1

在mapOptions对象内部，将center更改为center: { lat: 43.758773, lng: -79.391785 }

你可以参考这个https://developers.google.com/maps/documentation/javascript/examples/map-latlng-literal