（原创）vue-cli3引入google地图 —— 自己坑自己填


近日，公司需要重构一款引用google地图的app，本想用uni-app下手，发现web-view的坑真的爬不出来，挣扎一番后，弃之投vue。

google账号

想要制作google地图，账号是必须的，还有翻墙软件，参考谷歌官网 或者网上搜下很多，这里就不多说。
而且需要开通结算账号，否则地图就会有一层水印遮罩层。

项目中引入地图

首先引入谷歌地图 详细可看npm官网

1
npm install vue2-google-maps

在main.js中引入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 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,
})

在需要引入的页面中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<GmapMap
  :center="{lat:10, lng:10}"
  :zoom="7"
  map-type-id="terrain"
  style="width: 500px; height: 300px"
>
  <GmapMarker
  @dragend="updateMaker"
    :key="index"
    v-for="(m, index) in markers"
    :position="m.position"
    :clickable="true"
    :draggable="true"
    @click="center=m.position"
  />
</GmapMap>
<script>
    export default {
        data() {
            return {
                centers: {lat: 39.90419989999999,lng: 116.4073963},
                markers: [{
                    position: {lat: 39.90419989999999,lng: 116.4073963}
                }]
            }
        },
        methods：{
            updateMaker: function(event) {
                console.log('updateMaker, ', event.latLng.lat());
                this.markers[0].position = {
                    lat: event.latLng.lat(),
                    lng: event.latLng.lng(),
                }
            },
        }
 }

以上便完成基本的地图引入过程，这样就结束了吗？真正的坑现在才来，重点来了~~

深入了解谷歌api

如果你只是调用谷歌地图看下，那你已经可以点赞退出了，但是大部分人需要使用谷歌地图进行一系列定位，定图标，调用后台数据渲染地图之类的，显然这才是重点。
谷歌地图同百度地图一样，有两种调用方式，我在上一篇中有讲解 vue引入百度地图 ，首先引入

1
2
3
4
5
6
<gmap-map
      id="map"
      :center="centers"
      style="width: 100%; height: calc(100vh - 2rem);margin-top:1rem;"
    >
</gmap-map>

然后发现无法引用方法，没错了，这是我选择了谷歌官网api，发现了一个好东西
大事件
通过一系列的判断、测试、实验。。。
皮卡丘，决定就是你了，不对不对，是idle（通过判断事件的发生以及先后的顺序决定），于是乎在这个方法中你就可以打印出google 这个对象；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 <gmap-map
      id="map"
      :center="centers"
      style="width: 100%; height: 100vh;"
      @idle="handler"
    >
    </gmap-map>
   
<script>
export default {
  data: () => ({
    centers: { lat: 22.6502, lng: 113.2402 }
  }),
  methods: {
    handler(){
        console.log(google);
        // 实例化地图
        let map = new google.maps.Map(document.getElementById("map"), {
        zoom: 8,
        center: this.centers,
        // 地图类型 默认
        mapTypeId: "roadmap"
        // 禁用默认控件 便于修改控件样式 自定义控件 自定义位置
        // disableDefaultUI: true
      });
    }
  }
}
</script>

打印出这对象那就可以肆意地使用google的api进行添加方法了，首先，来尝试添加图标（或自定义图标）
注：引用本地图片使用require
官方自定义图标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
handler(){
   
    ...
   
     const marker = new google.maps.Marker({
            position: pos,
            // 不写icon默认为旗标图标
            // 引用本地图片使用require
            icon: require("../assets/caron.png"),
            map: map
          });
     // 点击定标
    marker.addListener("click", function(){
        console.log(1)
    });    
 }

也可以给每个图标添加信息窗口，点击打开或关闭 官方方法---- 信息窗口
在这里插入图片描述
可以根据自己需要的api自行添加方法，这就不一一说明，看官方示例都有。

希望以上对你有帮助，不要忘记点赞哦
有什么错误的，望不吝赐教，谢谢~~