У меня есть приложение, основанное на Vue.js, с использованием Monaca, Cordova и onsenUI. Я хочу показать свое местоположение с помощью карты Google на моей странице. Чтобы реализовать это, я использовал 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>
Для тех, кто с этой проблемой, проверьте эту проблему. В принципе, на вашей стороне ничего не меняется, просто установите высоту элемента карты.