时间戳

首页 > 解决方案 > Vue JS + 谷歌地图街景 API

vue.js - Vue JS + 谷歌地图街景 API

问题描述

我的系统使用 JQuery 而无法使用 Vue JS。

我有 Google Maps 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>

我要在哪里写这个密钥？我还必须在最后返回函数。

创建？安装？请帮我。

标签： vue.js

解决方案

假设您使用的是 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})
    })
  }
}

推荐阅读