一. vue 中引入 google Map

1.vue项目中引入谷歌地图，只需要在index.html页面header中引入外部脚本

<script src="https://maps.googleapis.com/maps/api/js?key=keyvalue&v=weekly" defer></script>

2.创建 google 地图

// 地图中心点的坐标 center { lat:"",lng:"" } 
// 地图类型 mapTypeId roadmap| satellite | hybrid | terrain
// 其他属性参考google地图的官方文档
this.map = new window.google.maps.Map(document.getElementById("map"), {
    zoom: 10, // 地图的缩放
    center: this.center, // 中心点的坐标 
    mapTypeControl: false, // 是否显示地图类型切换的按钮 默认 true
    fullscreenControl:false, // 是否显示全屏显示地图的按钮 默认 true
    streetViewControl: false, // 是否显示街景按钮 默认 true
    mapTypeId: this.currentMap.mapTypeId // 指定地图的类型 默认 roadmap
});

3.创建标记: marker

const marker = new window.google.maps.Marker({
  position: position, // 标记的位置
  map: this.map, // 标记所在的地图
  icon: icon // 标记的icon
});

4.绘制轨迹：Polyline

const polyline = new window.google.maps.Polyline({
    path: pathArr, // 轨迹的坐标数组
    strokeWeight: 3, // 轨迹线的宽度
    strokeColor: strokeColor,
    icons: [
      {
        icon: {path: google.maps.SymbolPath.CIRCLE},
        offset: "0%"
      }
    ],
    travelMode: google.maps.DirectionsTravelMode.DRIVING,
    map: this.map
  });

5: 绘制多边形: Polygon

const polygon = new google.maps.Polygon({
  paths: paths, // 多边形的路径
  strokeColor: "#FF0000", // 多边形边框颜色
  strokeOpacity: 0.8, // 边框的透明度
  strokeWeight: 2, // 边框颜色
  fillColor: data.color, // 填充颜色
  fillOpacity: 0.35, // 填充的透明度
  editable: true, // 是否允许编辑
  draggable: true, // 是吧允许拖拽
});
polygon.setMap(this.map);
// 监听多边形拖拽
polygon.addListener('dragend',(e) => {}));
// 监听多边形路径 insert_at
polygon.getPath().addListener('insert_at',e =>{} ));
// 监听多边形路径 remove_at
polygon.getPath().addListener('remove_at',e => {} ));
// 监听多边形路径 set_at
polygon.getPath().addListener('set_at', e => {} ));

// polygon.getPath().getArray() 获取多边形定点坐标数组

6:绘制：Circle

const circle = new google.maps.Circle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: data.color,
    fillOpacity: 0.35,
    editable: true,
    draggable: true,
    map: this.map,
    center: center, // 圆心点坐标
    radius: radius // 半径
});
// 监听退拽
circle.addListener('dragend',(e) =>  {} }));
// 监听半径变更
circle.addListener('radius_changed',(e) => {} ));
// 监听圆心变更
circle.addListener('center_changed', (e) => {}));

// circle.radius // 获取半径
// circle.center // 获取中心点坐标