Javascript vue.js中未显示Google地图
我有一个基于Vue.js的应用程序,使用Monaca、Cordova和onsenUI。我想在我的页面中使用谷歌地图显示我的位置。为了实现这一点,我使用了Javascript vue.js中未显示Google地图,javascript,google-maps,cordova,vue.js,monaca,Javascript,Google Maps,Cordova,Vue.js,Monaca,我有一个基于Vue.js的应用程序,使用Monaca、Cordova和onsenUI。我想在我的页面中使用谷歌地图显示我的位置。为了实现这一点,我使用了npm包vue2谷歌地图,但它没有显示任何内容 我使用的代码来自软件包的官方文档。详情如下: <template> <v-ons-page> <custom-toolbar>Page 1</custom-toolbar> <div>
npm
包vue2谷歌地图
,但它没有显示任何内容
我使用的代码来自软件包的官方文档。详情如下:
<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>
第1页
从“vue2谷歌地图”导入*作为VueLogleMaps;
从“Vue”导入Vue;
Vue.use(VueLogleMaps{
负载:{
关键字:“AIzaSyDX3SEHwFUY-KJP7YMP0-uTvo7up-paXM”,
v:‘3.26’,
//库:'places',///如果需要使用place输入
}
});
导出默认值{
数据(){
返回{
中心:{lat:10.0,lng:10.0},
标记:[{
位置:{lat:10.0,lng:10.0}
}, {
位置:{lat:11.0,lng:11.0}
}]
}
},
道具:['pageStack'],
组件:{customToolbar}
};
对于有此问题的任何人,请检查此项。基本上,您这边没有任何变化,只需设置地图元素的高度。missing;在style=“宽度:500px;高度:300px;”、、、中,缺少:在v-for=“(m,索引)在标记中”。。所以,请检查一下,如果我添加分号“:”@scaisEdge,它将显示无效的表达式