我使用 Monaca、Cordova 和 onsenUI 构建了一个基于 Vue.js 的应用程序。我想在我的页面中使用 Google map 显示我的位置。为了实现这一点,我使用了一个 npm
包 vue2-google-maps
但它没有显示任何内容。
我使用的代码来自软件包的官方文档。它们如下所示:
<template>
<v-ons-page>
<custom-toolbar>Page 1</custom-toolbar>
<div>
<gmap-map
:center="center"
:zoom="7"
style="width: 500px; height: 300px"
>
<gmap-marker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="true"
@click="center=m.position"
></gmap-marker>
</gmap-map>
</div>
</v-ons-page>
</template>
<script>
import * as VueGoogleMaps from 'vue2-google-maps';
import Vue from 'vue';
Vue.use(VueGoogleMaps, {
load: {
key: 'AIzaSyDX3SEHwFUY-k_Jp7YMp0-uTvo7up-paXM',
v: '3.26',
// libraries: 'places', //// If you need to use place input
}
});
export default {
data () {
return {
center: {lat: 10.0, lng: 10.0},
markers: [{
position: {lat: 10.0, lng: 10.0}
}, {
position: {lat: 11.0, lng: 11.0}
}]
}
},
props: ['pageStack'],
components: { customToolbar }
};
</script>
最佳答案
对于遇到此问题的任何人,请查看此 issue .基本上,您这边没有任何改变,只需设置 map 元素的高度即可。
关于javascript - 谷歌地图未在 vue.js 中显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46138047/