Javascript 将Google Maps VueJS组件(vue2 Google Maps)集成到Laravel刀片视图中
我正在使用vue2谷歌地图npm包将Google地图Vue JS组件集成到Laravel应用程序视图中 根据说明,我正在使用以下方法从npm包加载vue组件:Javascript 将Google Maps VueJS组件(vue2 Google Maps)集成到Laravel刀片视图中,javascript,laravel,vue.js,vuejs2,vue2-google-maps,Javascript,Laravel,Vue.js,Vuejs2,Vue2 Google Maps,我正在使用vue2谷歌地图npm包将Google地图Vue JS组件集成到Laravel应用程序视图中 根据说明,我正在使用以下方法从npm包加载vue组件: import * as VueGoogleMaps from 'vue2-google-maps'; Vue.use(VueGoogleMaps, { load: { key: 'mapkey', libraries: 'places' } }); 然后,我使用blade视图中的组件和文档中的示例代码:
import * as VueGoogleMaps from 'vue2-google-maps';
Vue.use(VueGoogleMaps, {
load: {
key: 'mapkey',
libraries: 'places'
}
});
然后,我使用blade视图中的组件和文档中的示例代码:
<GmapMap
:center="{lat:10, lng:10}"
:zoom="7"
map-type-id="terrain"
style="width: 100%; height: 500px"
id="googleMap"
>
<GmapMarker
:key="index"
v-for="(m, index) in mapPoints"
:position="m.position"
:clickable="true"
:draggable="true"
@click="center=m.position"
>
</GmapMarker>
</GmapMap>
我做错了什么?插件中的组件仅在
installComponents
选项设置为true
时安装
<gmap-map
:center="center"
:zoom="12"
style="width:100%; height: 400px;"
>
<gmap-marker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
@click="center=m.position"
></gmap-marker>
</gmap-map>
import GmapMap from 'vue2-google-maps/src/components/map';
import GmapMarker from 'vue2-google-maps/src/components/marker';
Vue.component('GmapMap', GmapMap);
Vue.component('GmapMarker', GmapMarker);
import * as VueGoogleMaps from 'vue2-google-maps';
Vue.use(VueGoogleMaps, {
load: {
key: 'mapkey',
libraries: 'places'
},
installComponents: true
});