0

ご覧のとおり: http://rolls.mit.edu/

私は次のことをしています：

  1. 地図を作成する

    map = new google.maps.Map(mapContainer, options);

  2. オーバーレイを追加

    overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);

  3. キャンバスをオーバーレイに追加

    overlay.getPanes().overlayLayer.appendChild(canvas);

ズームするときを除いて、すべてがうまく機能し、キャンバスは同じサイズのままです。ズームイン/ズームアウト時にキャンバスをズームすることはできますか? 例へのポインタはありますか？

4

2 に答える 2

0

サポートしたいグーグルズームレベルに合わせて、新しいキャンバスをレンダリングする必要があります。私がこれに対処した方法は、マップの「アイドル」イベントにリスナーを設定することです。これは、ズームまたはパンの後にマップがアイドル状態になると発生します。次に、ズームレベルに変化があるかどうかを判断し、それに応じて動作します。

var map = new google.maps.Map(mapContainer, options);
var zoomLevel = 6; //some defaut

var handleBoundsChanged = function(){
   var oldZoom = zoomLevel;
   var zoomLevel = map.getZoom();
   if( zoomLevel != oldZoom){
       rebuildOverlayForZoom(zoomLevel)
     }
}


google.maps.event.addListener (map, 'idle', handleBoundsChanged);
于 2013-02-14T00:24:57.690 に答える
0

google.maps.Map zoom_changed イベントをリッスンし、(map.getZoom() を使用して) マップから新しいズーム レベルを取得してから、キャンバス要素を適切にサイズ変更または変更する必要があります。

線を描画するだけの場合は、ズーム機能が組み込まれているgoogle.maps.Polylineオーバーレイを見てください。

于 2013-02-14T00:13:36.623 に答える