Google Maps API v3：使用OverlayView覆蓋整個地圖

因此，我一直在我的桌面上敲打我的頭，試圖優化這種我爲我的問題提出的hacky解決方案。我目前使用下面的代碼重新繪製我的覆蓋每次中心改變 - 但是這並不完全跟上移動設備（將覆蓋一旦繪製呼叫完成，但你可以看到非屏蔽區域拖動時）：Google Maps API v3：使用OverlayView覆蓋整個地圖

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的覆蓋整個地圖，而無需重繪 - 但是當我將這個.bounds_設置爲應該覆蓋整個地圖時 - 我的同樣的ne/sw計算返回完全錯誤的結果。

任何幫助將不勝感激！乾杯!

來源

2017-02-22 reid

您需要將其作爲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 
});

現在，添加融合標籤圖層。

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')" 
    },

來源

2017-02-22 18:22:05 Owais

Google Maps API v3：使用OverlayView覆蓋整個地圖

回答

相關問題