2021年在vue中使用 Google Map

目前在vue中使用google map有以下两种方法：

一、使用 JavaScript 创建地图实例

该方法优点在于可配置项多，方便自定义，缺点是较复杂，且文档为英文，有一定学习难度。

在开始之前确保你已经在https://console.cloud.google.com/google/maps-apis/overview（谷歌地图API官网）创建账户、开通并启用以下API，最后获取到你的Google Map JavaScript API Key，并且有科学上网的办法

Directions API 为路径规划API，而Maps JavaScript API是基础地图展示所需的API

然后在 index.html 的 head 标签中引入

<script src="https://maps.googleapis.com/maps/api/jskey=YOUR_KEY"></script>

如果不在 head 标签中引入的话会出现创建地图时用到的方法未定义的问题，所以需要先使文件加载完成后再初始化地图

国内访问的话目前是没有办法的

<script src="http://ditu.google.cn/maps/api/js?&key=YOUR_KEY"></script> // 国内访问方式，已不再支持

YOUR_KEY 为你的API Key

在你的vue文件中，创建一个 id 为 gMap 的 div，并且指定宽度和高度，不然会无法显示。然后创建 initMap 方法来初始化地图实例，最后在 mounted 钩子函数中调用，不然容易出现 google undefined 的错误

图例（仅供参考）：

代码：

<template>
	<div class="map-main" id="gMap"></div>
</template>
<script>
    // MarkerWithLabel.js 如果引入不生效的话，可以把内容复制到这里
	export default {
     
    name: 'FB_map',
    data() {
     
        map: null,
        markers:[
            {
     
                name: 'william',
                url: require('../../assets/signIn.png'),
                position: {
     
                  lat: 45.51118967089818,
                  lng: -73.63236753474335
                }
          }
        ]
    },
    mounted() {
     
        this.initMap() // vue实例挂载完成后初始化地图
    },
    methods: {
     
        initMap() {
     
            this.map = new google.maps.Map(document.getElementById('gMap'), {
     
              zoom: 12, // 缩放的数值
              center: this.markers[0].position, // 将第一个marker的坐标作为地图中心的坐标点
              mapTypeId: google.maps.MapTypeId.ROADMAP // 地图类别
            });
            // 遍历标记的数组
            this.markers.map(item => {
     
              let marker = new MarkerWithLabel({
     
                position: item.position,
                icon: {
     
                  url: require('../../assets/signIn.png'), // 你的 icon 路径
                  scaledSize: new google.maps.Size(60, 60), // icon 的位置
                  //origin: new google.maps.Point(0, 0), // origin
                  // labelOrigin: { x: 25, y: 50} // label 的位置
                },
                draggable: false, // 是否可拖动
                map: this.map, // 绑定的地图实例
                labelAnchor: new google.maps.Point(30, 60), // label 的位置
                labelClass: '' // label 的 class
              });
              marker.addListener("click", () => {
      // 为标记添加点击事件
                map.setCenter(item.position) // 每次点击标记会将地图的中心定位到标记
                marker.set('labelClass', 'labels'); // 每次点击标记会设置label的class为labels
              })
              // var infowindow = new google.maps.InfoWindow({  // 信息窗口
              //   content: item.name
              // });
              // marker.addListener("mouseover", () => { // hover 触发信息窗口
              //   infowindow.open(this.map, marker);
              // });
              // marker.addListener("mouseout", () => {
     
              //   infowindow.close(this.map, marker);
              // });
            })
    	}
      },
    }
</script>
<style>
  .map-main {
     
    width: 100%;
    height: 500px;
    border-radius: 10px;
    overflow: hidden;
  }
  .labels {
      // 如果 labels 样式不生效看看 style 标签的 scoped 是否去掉
    height: 52px;
    width: 52px;
    border-radius: 50%;
    border: 4px solid #6c62db;
  }

</style>

二、使用vue2-google-maps

该方法优点在于使用方便，无需使用 js 创建地图的实例，缺点在于自定义范围小，如无法自定义 label 的样式

1.安装

在开始前我们需要安装一下相关依赖：

npm install vue2-google-maps

2.配置

然后到 main.js 文件中，添加如下配置：

import * as VueGoogleMaps from 'vue2-google-maps'
Vue.use(VueGoogleMaps, {
   
    load: {
   
      key: "YOUR_API_KEY"
    }
})

YOUR_KEY 为你的API Key

3.使用

接下来就可以在你的vue文件中正常使用了，注意不同于使用JavaScript创建地图实例，我们使用到了 vue2-google-maps 中自带的组件 <GmapMap> 以及 <GmapMarker>

图例：

代码（无需使用 js 创建地图实例）：

<template>
  <div class="map-container">
    <div class="map-main">
      <GmapMap :center='center' :zoom='12' ref="mapRef" class="map-main">
        <GmapMarker @dragend="updateMaker" :key="index" v-for="(marker, index) in markers" :position="marker.position" :clickable="true" :icon="marker.markerData" @click="center=marker.position" class="map-marker" :label="marker.label"></GmapMarker>
      </GmapMap>
        <!--
		label：需要传入图标的标签配置
		position：需要传入地图标记的坐标
		clickable：需要传入布尔类型的值，控制地图标记是否可以点击
		icon：地图标记的图标路径
		@click：标记点击事件
		@dragend：拖动结束触发事件
		-->
    </div>
<template>
    
<script>
  export default {
     
    name: 'FB_map',
    data() {
     
      return {
     
        markers: [
          {
     
            markerData: {
     
              url: require('../../assets/signIn.png'),
              size: {
     width: 60, height: 60, f: 'px', b: 'px',},
              scaledSize: {
     width: 60, height: 60, f: 'px', b: 'px',},
              labelOrigin: {
     x: 16, y: -10}
            },
            label: 'label',
            position: {
     
              lat: 45.53317193016025,
              lng: -73.58580366167472
            }
          },
          {
     
            markerData: {
     
              url: require('../../assets/logo.png'),
              scaledSize: {
     width: 50, height: 50, f: 'px', b: 'px',}
            },
            label: {
     
              text: 'label',
              color: "black",
              fontWeight: "bold",
              fontSize: "12px"
            },
            title: 'fff',
            position: {
     
              lat: 45.49118967089818,
              lng: -73.62236753474335
            }
          }
        ],
        center: {
     
          lat: 45.508,
          lng: -73.587
        }
      };
    }
  }

</script>

三、总结

方法	优点	缺点
JavaScript创建地图实例	可以详细自定义地图的各项配置，有官方文档以及海量博客来帮助学习和配置	相比另一种方法较为复杂，需要踩的坑也比较多
使用vue2-google-maps	上手简单，配置项虽然少但方便操作	配置项少，比如无法操作label样式，相关问题解决的博客相比起来比较少

四、MarkerWithLabel.js 源代码

/**
   *