Vue JS+谷歌地图街景API

Question

我的系统使用JQuery而不使用Vue JS。

我有谷歌地图API，我不知道用Vue JS写这个API：(请帮我…

抱歉英语不好：(

此方法触发API。

initmap(newLat, newLng) {
var lat = parseFloat(newLat);
var lng = parseFloat(newLng);
var fenway = { lat: lat, lng: lng };
var map = new google.maps.Map(document.getElementById("MainGameBoard"), {
center: fenway,
zoom: 14
});
var panorama = new google.maps.StreetViewPanorama(
document.getElementById("MainGameMap"),
{
position: fenway,
pov: {
heading: 34,
pitch: 10
}
}
);
map.setStreetView(panorama);
},

我的API：

<script async defer src="https://maps.googleapis.com/maps/api/jskey=API-KEY&callback=initMap" type="text/javascript"></script>

我要把这把钥匙写在哪里？我还必须回到最后的函数。

创建？安装？请帮帮我。

Answer 1

假设您正在使用Vue SPA，这看起来就像您需要的：

https://www.npmjs.com/package/vue2-google-maps

按照链接中的说明安装：

npm install vue2-google-maps

配置你的main.js文件：

import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'
Vue.use(VueGoogleMaps, {
load: {
key: 'YOUR_API_TOKEN',
libraries: 'places', // This is required if you use the Autocomplete plugin
// OR: libraries: 'places,drawing'
// OR: libraries: 'places,drawing,visualization'
// (as you require)
//// If you want to set the version, you can do so:
// v: '3.26',
},
//// If you intend to programmatically custom event listener code
//// (e.g. `this.$refs.gmap.$on('zoom_changed', someFunc)`)
//// instead of going through Vue templates (e.g. `<GmapMap @zoom_changed="someFunc">`)
//// you might need to turn this on.
// autobindAllEvents: false,
//// If you want to manually install components, e.g.
//// import {GmapMarker} from 'vue2-google-maps/src/components/marker'
//// Vue.component('GmapMarker', GmapMarker)
//// then disable the following:
// installComponents: true,
})

在您的模板中使用：

<template>
<GmapMap ref="mapRef" ...>
</GmapMap>
</template>
<script>
export default {
mounted () {
// At this point, the child GmapMap has been mounted, but
// its map has not been initialized.
// Therefore we need to write mapRef.$mapPromise.then(() => ...)
this.$refs.mapRef.$mapPromise.then((map) => {
map.panTo({lat: 1.38, lng: 103.80})
})
}
}