Question

所以，我一直在我的桌子上敲我的头试图优化我为我的问题提出的这种hacky解决方案。我目前正在使用以下代码在每次更改中心时重新绘制我的叠加层 - 但是这并不能完全跟上移动设备（一旦完成绘制调用就会覆盖，但你可以看到非拖动时屏蔽区域：

export default class MapOverlay extends google.maps.OverlayView {
  constructor (bounds, image, map) {
    super()

    this.bounds_ = bounds
    this.image_ = image
    this.map_ = map
    this.div_ = null

    this.setMap(map)
  }

  onAdd () {
    var div = document.getElementById('map-overlay')
    this.div_ = div
    var panes = this.getPanes()
    panes.overlayLayer.appendChild(div)

    // add a listener to re-mask the new bounds on each map drag
    google.maps.event.addListener(this.map_, 'center_changed', () => { this.draw() })
  }

  draw () {
    // get current bounds, mask that junk yo
    var overlayProjection = this.getProjection()
    var bounds = this.map_.getBounds()
    var sw = overlayProjection.fromLatLngToDivPixel(bounds.getSouthWest())
    var ne = overlayProjection.fromLatLngToDivPixel(bounds.getNorthEast())
    this.bounds_ = bounds

    var div = this.div_
    div.style.left = sw.x + 'px'
    div.style.top = ne.y + 'px'
    div.style.width = (ne.x - sw.x) + 'px'
    div.style.height = (sw.y - ne.y) + 'px'
  }
}

我真正希望能做的只是将自定义边界设置为（85，-180），（ - 85,180）并让我的OverlayView覆盖整个地图而无需重绘 - 但是当我将this.bounds_设置为应该覆盖整个地图 - 我的相同ne / sw计算返回完全错误的结果。

任何帮助将不胜感激！干杯！

Answer 1

您需要将其作为Fusion Tab Layer添加到地图中。

var map = new google.maps.Map(document.getElementById('mapDiv'), {
  center: new google.maps.LatLng(30,72),
  zoom: 3,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

现在，添加Fusion Tab图层。

var world_geometry = new google.maps.FusionTablesLayer({
  query: {
    select: 'geometry',
    from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk'
  },
  map: map,
  suppressInfoWindows: true
});

如果您愿意，也可以将叠加层添加到特定国家/地区。

query: {
    select: 'geometry',
    from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk',
    where: "ISO_2DIGIT IN ('US', 'GB', 'DE')"
  },

Google Maps API v3：使用OverlayView覆盖整个地图

1 个答案: