时间戳

首页 > 解决方案 > 如何使用 vuejs 显示谷歌地图

javascript - 如何使用 vuejs 显示谷歌地图

问题描述

如何使用 vue js 显示谷歌地图？我在下面给出了代码。它给出的地图是未定义的，但我已经安装了该谷歌地图的所有依赖项。

<div id="map"></div>

下面是我的脚本

import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'

export default {
  data: function() {
    return {}
  },
  mounted() {
    let myLatlng = new window.google.maps.LatLng(12.9716, 77.5946);
    let mapOptions = {
      zoom: 14,
      center: myLatlng,
      scrollwheel: true,
    };
    let map = new window.google.maps.Map(
      document.getElementById("map"),
      mapOptions
    );

    let marker = new window.google.maps.Marker({
      position: myLatlng,
      title: "Banglore"
    });

标签： javascriptgoogle-mapsvue.js

解决方案

vue2-google-maps公开了可用于地图和标记的组件

<template>
    <GmapMap
        :center="center"
        :zoom="14"
    >
        <GmapMarker
            :position="markerPosition"
        />
    </GmapMap>
</template>

<script>
export default {
    data () {
        return {
            center: {
                lat: 12.9716,
                lng: 77.5946
            },
            markerPosition: {
                lat: 12.9716,
                lng: 77.5946
            }
        }
    }
}
</script>

如果您需要访问 google 对象，vue2-google-maps 建议创建一个计算属性。

<script>
import {gmapApi} from 'vue2-google-maps'

export default {
    computed: {
        google: gmapApi
    }
}
</script>

推荐阅读