18

Google マップの zoom_changed イベントが、具体的にはユーザーによる +/- ズーム ボタンの操作によっていつ発生するかを知りたいです。zoom_changed に一般的なイベント リスナーを使用すると、それがユーザー生成イベントなのか、fitBounds() などによって引き起こされたズーム変更なのかわかりません。これを行うための最良の方法を探しています。

私は次のことを試しましたが、どれもうまくいかないようです:

1) zoom_changed のイベント情報を探しました。何もないようです。

2) mouseover と mouseout のリスナーを追加して、フラグを設定して、ユーザーがマップの境界内にいるかどうかを確認し、zoom_changed でフラグを確認できるようにします。マップはズーム ボタンをマップ フレームの一部と見なさないため、これは機能しません (つまり、ズーム ボタンにカーソルを合わせると、マウスアウト イベントがトリガーされます)。

3) 通常の (非 gMap) リスナーをズーム ボタンに追加します。ただし、ボタンだけを取得できる決定的な CSS セレクターが見つかりません。

4) getZoomElements() などを実行できる gMaps API の関数を探し、それを使用してリスナーを設定できました。

奇妙なことに、マップにカスタム コントロールを追加すれば、やりたいことを明確に実行できます。デフォルトのズームコントロールにフックする代わりに、彼らが私にそれを強制するのは非常に奇妙に思えます。

4

5 に答える 5

6

+/-ボタン (または独自のカスタム コントロールのボタン) にフックするだけではありません。ユーザーは、マウス ホイールを使用するか、マップをダブルクリックして、マップのズームを変更できます。さらに、ドキュメント化された API ではなく、実装の詳細に依存することになります。

これは、ズームの変化を検出する唯一の信頼できる文書化されzoom_changedた方法は、Map.

イベントがユーザー アクションによるものか API 呼び出しによるものかをイベント ハンドラーが判断できない場合は、次の 2 つの方法があります。

  • この変更を無視できることがわかるように、API 関数を呼び出す前にフラグを設定します。
  • ズームの変更がコードによるものかユーザーによるものかを問わないように、アプリを再構築できますか?
于 2012-04-10T23:17:01.147 に答える
5

マップに カスタム ズーム ボタンを作成することで、この問題を解決しました。

これが私のプロジェクトのコードです:
編集:不要で自明の共通コードを削除し ました

あなたの zoomControl 関数: 

function zoomControl(map, div) {

  var controlDiv = div,
      control = this;

  // Set styles to your own pa DIV
  controlDiv.style.padding = '5px';

  // Set CSS for the zoom in div.
  var zoomIncrease = document.createElement('div');
  zoomIncrease.title = 'Click to zoom in';
  // etc.

  // Set CSS for the zoom in interior.
  var zoomIncreaseText = document.createElement('div');
  // Use custom image
  zoomIncreaseText.innerHTML = '<strong><img src="./images/plusBut.png" width="30px" height="30px"/></strong>';
  zoomIncrease.appendChild(zoomIncreaseText);

  // Set CSS for the zoom out div, in asimilar way
  var zoomDecreaseText = document.createElement('div');
  // .. Code .. Similar to above

  // Set CSS for the zoom out interior.
  // .. Code ..

  // Setup the click event listener for Zoom Increase:
  google.maps.event.addDomListener(zoomIncrease, 'click', function() {
      zoom = MainMap.getZoom();
      MainMap.setZoom(zoom+1);
      // Other Code parts
  });

  // Setup the click event listener for Zoom decrease:
  google.maps.event.addDomListener(zoomDecrease, 'click', function() {
      zoom = MainMap.getZoom();
      MainMap.setZoom(zoom-1);
  });
}

あなたの初期化関数：

function initializeMap() {

    var latlng = new google.maps.LatLng(38.6, -98);
    var options = {
        zoom : 5,
        center : latlng,
        mapTypeId : google.maps.MapTypeId.ROADMAP,  
        // Other Options
    };
    MainMap = new google.maps.Map(document.getElementById("google-map-canvas"),
            options);

    // The main part - Create your own Custom Zoom Buttons
    // Create the DIV to hold the control and call the zoomControl()
    var zoomControlDiv = document.createElement('div'), 
        zoomLevelControl = new zoomControl(MainMap, zoomControlDiv);

    zoomControlDiv.index = 1;
    MainMap.controls[google.maps.ControlPosition.RIGHT_TOP].push(zoomControlDiv);
}

それが役に立てば幸い

于 2012-12-31T07:27:38.717 に答える
3

私は同じことをしようとしていました。Google Maps API に組み込まれた方法があることを期待していましたが、少なくとも、マップを初期化するときに開始ズーム レベルを変数として保存できるはずです。次に、getZoom() の結果を比較して、ズームインかズームアウトかを確認します。

例えば：

map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 11 });
var previous_zoom = 11;

google.maps.event.addListener(map,'zoom_changed',function(){
  if(map.getZoom() > previous_zoom) {
    alert('You just zoomed in.');
  }
  previous_zoom = map.getZoom();
}
于 2012-12-03T21:45:05.090 に答える
0

ズームイン/ズームアウト用のカスタム コントロールを使用してから、カスタム コングロールでイベント リスナーを使用することをお勧めします。

http://goo.gl/u8gKC

デフォルトのズーム コントロールは簡単に非表示にできます。

http://goo.gl/N5HIE

（zoomControl具体的に）

于 2012-04-11T02:35:47.743 に答える