谷歌地图的API应用

基础设置

  // 配置地图初始参数
  setMapOptions() {
    let mapOptions = {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      gestureHandling: 'greedy', // 地图上的手势
      mapTypeControl: false, // Map类型控件
      mapTypeControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
      },
      clickableIcons: false, // 地图图标不可点击
      streetViewControl: false, // 街景街景小人物
      fullscreenControl: false, // 全屏控件
      panControl: false, // 平移控件--没效果
      panControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
      },
      zoomControl: true, // 地图缩放级别
      zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
      }
    }
    return mapOptions
  },
  // 创建中心点
  centerZoom(map, point, zoom) {
    map.setCenter(point)
    map.setZoom(zoom)
  },
  // 获取点坐标
  createPoint(lng, lat) {
    // lat:纬度，lng:经度
    return new google.maps.LatLng(lat, lng) // 顺序和其它地图api的不一样
  },
  // 切换城市
  toggleCity(args) {
    const {map, cityName, zoom} = {...args}
    let geocoder = new google.maps.Geocoder()
    geocoder.geocode({
      'address': cityName
    }, function(results, status) {
      if (status === google.maps.GeocoderStatus.OK) {
        let point = results[0].geometry.location
        // results数组里有很多有用的信息，包括坐标和返回的标准位置信息
        map.setCenter(point)
        map.setZoom(zoom)
      } else {
        console.warn('Address resolution error!!!')
      }
    })
  },

信息窗

  // 创建信息窗
  createInfoWindow() {
    let infoWindow = new google.maps.InfoWindow({
      pixelOffset: new google.maps.Size(0, -40),
      maxWidth: 345,
      disableAutoPan: true // 打开时禁用自动平移
    })
    return infoWindow
  },
  // 打开信息窗
  openInfoWindow(map, infoWd, point) {
    infoWd.setPosition(point)
    infoWd.open(map)
  },
  // 关闭信息窗
  closeInfoWindow(map, infoWd) {
    infoWd && infoWd.close()
  },

覆盖物

  // 创建实时路况图层
  createTraffic() {
    return new google.maps.TrafficLayer()
  },
  // 加载markerwithlabel文件
  getMarkerWithLabel(googleMaps) {
    // 在npm上查询到markerwithlabel
    MarkerWithLabel = require('./js/markerwithlabel')(googleMaps)
  },
  // 创建marker
  createMarker(args) {
    const { point, iconPath, isLabelMarker = false } = {...args}
    let marker
    // 默认是没有label的marker，如需要有lable的marker配置传入的参数isLabelMarker为true即可
    if (isLabelMarker) {
      marker = new MarkerWithLabel({
        position: point,
        icon: iconPath,
        raiseOnDrag: true,
        labelContent: '', // label的内容
        labelAnchor: new google.maps.Point(-25, 32),
        labelClass: 'google-labels', // the CSS class for the label
        labelStyle: {
          'color': '#666',
          'background-color': '#fff'
        },
        labelInBackground: false
      })
      // 给marker添加静态方法，用于设置label的内容、样式
      marker.setText = function (labelTxt) {
        marker.labelContent = labelTxt
      }
      marker.setStyle = function (styleOpts) {
        marker.labelStyle = {...marker.labelStyle, ...styleOpts}
      }
    } else {
      marker = new google.maps.Marker({
        icon: iconPath,
        position: point
      })
    }
    return marker
  },

圆形/矩形/多边形/折线

  // 绘制圆
  createCircle(point, radius) {
    let circle = new google.maps.Circle({
      center: point, // 圆心位置
      radius: radius, // 半径
      fillColor: '#1989fa', // 圆形填充颜色
      strokeWeight: 2, // 圆形边线的宽度
      strokeColor: '#1989fa', // 圆形边线颜色
      fillOpacity: 0.3 // 圆形填充的透明度
      // strokeOpacity: 0.3 // 圆形边线的透明度
    })
    return circle
  },
  // 绘制矩形
  createRectangle(pointObj) {
    let rectangle = new google.maps.Rectangle({
      bounds: pointObj,
      editable: false // 设置是否可编辑
    })
    return rectangle
  },
  // 绘制多边形
  createPolygon(pointArr) {
    let polygon = new google.maps.Polygon({
      path: pointArr,
      fillColor: '#1989fa', // 圆形填充颜色
      strokeWeight: 2, // 圆形边线的宽度
      strokeColor: '#1989fa', // 圆形边线颜色
      fillOpacity: 0.3 // 圆形填充的透明度
    })
    return polygon
  },
  // 绘制折线
  createPolyline(pointArr) {
    let polyline = new google.maps.Polyline({
      path: pointArr,
      geodesic: true,
      strokeColor: '#B89AE5',
      strokeWeight: 4,
      strokeOpacity: 1
    })
    return polyline
  },

鼠标绘制工具

drawingManager(map) {
  // https://developers.google.com/maps/documentation/javascript/drawinglayer
  let styleOptions = {
    strokeColor: '#1989fa', // 边线颜色。
    fillColor: '#6130CA', // 填充颜色。当参数为空时，圆形将没有填充效果。
    strokeWeight: 2, // 边线的宽度，以像素为单位。
    // strokeOpacity: 0.8,     // 边线透明度，取值范围0 - 1。
    fillOpacity: 0.2, // 填充的透明度，取值范围0 - 1。
    strokeStyle: 'solid', // 边线的样式，solid或dashed。
    clickable: false, // 是否可点击
    editable: false // 是否可编辑
  }
  let drawingManager = new google.maps.drawing.DrawingManager({
    map: map,
    // drawingMode: google.maps.drawing.OverlayType.MARKER, // 绘制模式 CIRCLE MARKER POLYGON POLYLINE RECTANGLE
    drawingControl: false, // 绘图控件的启用
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
    },
    rectangleOptions: styleOptions, // 矩形的样式
    circleOptions: styleOptions, // 圆形的样式
    polygonOptions: styleOptions, // 多边形的样式
    polylineOptions: styleOptions // 线的样式
  })
  return drawingManager
}

计算类

  // 判断点是否在可视区域内
  pointInVisibleArea(map, point) {
    let flag = false
    let gpsamap = point
    let bs = map.getBounds() // 获取可视区域
    let bssw = bs.getSouthWest() // 可视区域左下角
    let bsne = bs.getNorthEast() // 可视区域右上角
    let gpsamap_lon = gpsamap.lng()
    let gpsamap_lat = gpsamap.lat()
    if ((bssw.lng() <= gpsamap_lon && gpsamap_lon <= bsne.lng()) && (bssw.lat() <= gpsamap_lat && gpsamap_lat <= bsne.lat())) {
      flag = true
    }
    return flag
  },
  // 获取两点之间的距离
  getDistance(startPoint, endPoint) {
    return google.maps.geometry.spherical.computeDistanceBetween(startPoint, endPoint)
  },
  // 获取多边形的面积
  getComputeArea (pointArr) {
    return google.maps.geometry.spherical.computeArea(pointArr)
  },
  // 根据坐标点自动缩放
  setViewArea(map, bounds) {
    map.fitBounds(bounds)
  },

处理谷歌地图marker旋转

/*
* 功能：使用canvas旋转图标，并生成路径
* 参数：options（Object）
* 用途：处理谷歌地图marker旋转
* */
const setRotation = (options) => {
  return new Promise((resolve, reject) => {
    let w = options.width || 40
    let h = options.height || 40
    let canvas = document.createElement('canvas')
    canvas.width = w
    canvas.height = h
    let ctx = canvas.getContext('2d')
    let angle = options.deg ? options.deg * Math.PI / 180 : 0
    let centerX = w / 2
    let centerY = h / 2
    let dataURL = ''
    let img = new Image()
    img.src = options.url
    img.onload = function() {
      ctx.clearRect(0, 0, w, h)
      ctx.save()
      ctx.translate(centerX, centerY)
      ctx.rotate(angle)
      ctx.translate(-centerX, -centerY)
      ctx.drawImage(img, centerX/2, 0)
      ctx.restore()
      dataURL = canvas.toDataURL('image/png')
      resolve({
        size: options.size,
        origin: options.origin,
        url: dataURL
      })
    }
  })
}