Google Maps API v3：オーバーレイビューで全体地図を覆う

Question

私は自分の机の上に頭を抱えて、このようなハッキーなソリューションを最適化しようとしています。私は現在、センターが変更されるたびに私のオーバーレイを再描画するために次のコードを使用していますが、これはモバイルデバイスにはほとんど対応していません（ドローコール完了後はカバーされますが、ドラッグしている間はマスクされていない領域）：私は本当にすることなく、単に（85、-180）、（-85、180）にカスタム境界を設定してやると私の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' 
    } 
} 

再描画 - しかし、私は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 
}); 

ここで、フュージョンタブレイヤーを追加します。

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