1. 申请谷歌地图api的key

注：首先网络是能翻墙 不然啥也看不见

2. 在vue项目中安装vue-google-maps

注：此时的–save是把vue-google-maps写入package.json)

npm install --save vue2-google-maps@0.10.7

安装完成之后，查看package.json是否有vue-google-maps​​

"vue2-google-maps": "^0.10.7",

3. 在main.js文件中引入

import * as VueGoogleMaps from 'vue2-google-maps'
Vue.config.productionTip = false
Vue.use(VueGoogleMaps, {
  load: {
    key: '', // 此处填入谷歌地图申请的key
    libraries: 'places'
  }
})

4.新建谷歌地图弹框GoogleMap.vue

<template>
  <el-dialog :visible.sync="dialog" append-to-body title="Dialog Demo">
    <div>
      <br>
      <GmapMap
        :center="center"
        :zoom="12"
        style="width:100%;  height: 400px;"
      />
    </div>
  </el-dialog>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
// dialog 打开方式; this.refs.xxx.dialog = true

export default {
// import引入的组件需要注入到对象中才能使用
  name: 'GoogleMap',
  components: {},
  data() {
    // 这里存放数据
    return {
      dialog: false,
      formLabelWidth: '120px',
      center: { lat: 45.508, lng: -73.587 }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  mounted() {
    this.geolocate()
  },
  // 监控data中的数据变化
  // 方法集合
  methods: {
    geolocate: function() {
      navigator.geolocation.getCurrentPosition(position => {
        this.center = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
          // lat: 45.508,
          // lng: -73.587
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类

</style>

5.在父组件中引入GoogleMap.vue

    <google-map ref="google-map"/>

import GoogleMap from './GoogleMap.vue'

components: {GoogleMap}

更多用法参考官方文档

https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-cn