vue 使用谷歌地图相关操作

0.地图初始化

    initMap() {
      this.map = new google.maps.Map(document.getElementById('js-container'), {
        zoom: 15,
        center: { lat: xxx, lng: xxx }, // 中心点
        mapTypeId: 'terrain',
        keyboardShortcuts: false, // 隐藏右下角 快捷键盘
        fullscreenControl: false, // 隐藏全屏
        zoomControl: false, // 隐藏缩放
        clickableIcons: false, // 禁止点击marker
        disableDefaultUI: true // 禁用默认 UI 控件
      })
    },

1.获取polygon中心点

// 获取polygon中心点
export function getCenter(lnglatarr) {
  var total = lnglatarr.length
  var X = 0; var Y = 0; var Z = 0
  lnglatarr.forEach((lnglat, index) => {
    var lng = lnglat.longitude * Math.PI / 180
    var lat = lnglat.latitude * Math.PI / 180
    var x, y, z
    x = Math.cos(lat) * Math.cos(lng)
    y = Math.cos(lat) * Math.sin(lng)
    z = Math.sin(lat)
    X += x
    Y += y
    Z += z
  })
  X = X / total
  Y = Y / total
  Z = Z / total

  var Lng = Math.atan2(Y, X)
  var Hyp = Math.sqrt(X * X + Y * Y)
  var Lat = Math.atan2(Z, Hyp)
  // return new AMap.LngLat(Lng * 180 / Math.PI, Lat * 180 / Math.PI)  高德地图使用
  return [Lng * 180 / Math.PI, Lat * 180 / Math.PI] // 谷歌地图使用
}

2.判断点是否在面内
可判断两面是否重叠相交,目前没找到面与面关系判断

/**
*  判断点是否在面内
* LngLat:绘制的坐标
*/
export function isArea(LngLat, total) {
  var result = google.maps.geometry.poly.containsLocation(
    LngLat,
    total
  )
  return result
}

3.polygon上展示文本

// polygon上展示文本
export function showText(map, title, position) {
  var marker = new google.maps.Marker({
    position: position,
    map: map,
    label: title,
    icon: {
      url: '', // 设置图标路径为空
      size: new google.maps.Size(0, 0) // 设置图标大小为0，只要url为空即可
    }
  })
  return marker
}

4.展示polygon

// 展示矢量图形
export function showPolygon(map, area, color, zoom, center) {
  // zoom false自适应 true不自适应
  const polygon = new google.maps.Polygon({
    paths: area,
    strokeColor: color || '#004BDC',
    strokeOpacity: 0.5,
    strokeWeight: 2,
    fillColor: color || '#004BDC',
    fillOpacity: 0.2
  })
  polygon.setMap(map)
  if (zoom) {
    // polygon自适应
    var latlngbounds = new google.maps.LatLngBounds()
    for (var i = 0; i < area.length; i++) {
      latlngbounds.extend(area[i])
    }
    map.fitBounds(latlngbounds)
    if (center) {
      // 设置地图中心点
      map.setCenter({ lat: center[0], lng: center[1] })
    }
  }
  return polygon
}

5.绘制polygon

    // 绘制多边形
    drawPolygon(color, draw) {
        var that = this
        that.drawingManager = new google.maps.drawing.DrawingManager({
          drawingMode: google.maps.drawing.OverlayType.POLYGON,
          drawingControl: false,
          drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
              google.maps.drawing.OverlayType.POLYGON
            ]
          },
          polygonOptions: {
            strokeColor: color || '#004BDC', // 边线颜色。
            strokeOpacity: 0.6,
            fillColor: color || '#004BDC',
            fillOpacity: 0.2,
            strokeWeight: 2,
            clickable: true,
            editable: false,
            zIndex: 1
          }
        })
        that.drawingManager.setMap(that.map)
        // 获取绘制 经纬度
        google.maps.event.addListener(that.drawingManager, 'overlaycomplete', function(event) {
          if (event.type === 'polygon') {
            that.drawingManager.setMap(null)
           console.log(event.overlay,event.overlay.getPath())
          }
        })
      }

6.逆地址解析

    // 逆地址解析
    getAddress(location, obj) {
      // location = {lat: xxxxx,lng:xxxxx}
      const geocoder = new google.maps.Geocoder()
      geocoder
        .geocode({ location: location })
        .then((response) => {
          if (response.results[0]) {
           console.log(response.results[0].formatted_address)
          }
        })
        .catch((e) => {
          console.log(e)
        }
        )
    }