谷歌地图未在 vue.js 中显示
Posted
技术标签:
【中文标题】谷歌地图未在 vue.js 中显示【英文标题】:Google map is not showing in vue.js 【发布时间】:2018-02-18 15:40:48 【问题描述】:我使用 Monaca、Cordova 和 onsenUI 构建了一个基于 Vue.js 的应用程序。我想在我的页面中使用谷歌地图显示我的位置。为了实现这一点,我使用了 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>
【问题讨论】:
缺失;在样式 =“宽度:500 像素;高度:300 像素;” ,,, missing : in v-for="(m, index) in markers" .. 所以检查你的 sintax 如果我添加分号':'@scaisEdge,它会显示无效的表达式 【参考方案1】:对于遇到此问题的任何人,请查看此issue。基本上,您这边没有任何变化,只需设置地图元素的高度即可。
【讨论】:
以上是关于谷歌地图未在 vue.js 中显示的主要内容,如果未能解决你的问题,请参考以下文章