4

javascript google-maps API を使用する

現在、場所を追加するときに設定したメーカーを削除するように設定しています

  function addLocation(map,location) {
      var point = new GLatLng(location.lat, location.lon);
      var marker = new GMarker(point);
      map.addOverlay(marker);
      bounds.extend(marker.getPoint());

      $('<a href="#" class="closebutton">').click(function(e){
        e.preventDefault();
        $(this).parent().remove();
        map.removeOverlay(marker);
        map.closeInfoWindow();
    }).prependTo($('<li>'+location.label+'</li>').click(function() {
            showMessage(marker, location.label,map);    
      }).appendTo("#list"));
      GEvent.addListener(marker, "click", function() {
        showMessage(marker, location.label,map);
      });
  }

次に、ズームレベルを設定する関数があります

 function zoomToBounds(map) {
     map.setCenter(bounds.getCenter());
     map.setZoom(map.getBoundsZoomLevel(bounds) - 1);
 }

これは addLocations 関数の後に呼び出され、やりたいことを実行し、ズーム レベルを設定して、すべてのメーカーを表示できるようにします。

直後に zoomToBounds を呼び出すと

  map.removeOverlay(marker);

移動せず、同じズーム レベルのままです。

だから私が知りたいのは、マーカーを削除した後にズームレベルを設定する方法があるかどうかです??

4

1 に答える 1

4

こんにちは。これは間違いなく、Google Maps API を使用して実現できることです。

必ず行う必要がある重要なことの 1 つは、GMap2 オブジェクトにその位置とズーム レベルを再計算させる前に、GLatLngBounds オブジェクトを更新することです。

これを行うには、GMarker が使用しているすべてのポイントのある種のデータ ストアを保持することをお勧めします。

GMarker が削除されたときに、GEvent Listeners を使用して zoomToBounds 関数をイベントに関連付けることもできます。

これが私が話していることのコードスニペットです：

var bounds = new GLatLngBounds();
var points = {};

function createMarker(location)
{
     /*Create Our Marker*/
     var point = new GLatLng(location.lat,location.lon);
     var marker = new GMarker(point);

     /*Add an additional identifier to the Marker*/
     marker.myMarkerName = 'uniqueNameToIDMarkerPointLater';

     /*Store the point used by this Marker in the points object*/
     points[marker.myMarkerName] = point;

     /*Create an event that triggers after the marker is removed to call zoomToBounds*/
     GEvent.addListener(marker,"remove",function()
     {
          /*Passes the marker's ID to zoomToBounds*/
          zoomToBounds(this.myMarkerName);    
     };

     /*Add the new point to the existing bounds calculation*/
     bounds.extend(point);      

     /*Draws the Marker on the Map*/     
     map.addOverlay(marker);                  
}

function zoomToBounds(name)
{
     /*Remove the Point from the Point Data Store*/
     points[name]=null;

     /*Create a new Bounds object*/
     bounds = new GLatLngBounds();

     /*Iterate through all our points and build our new GLatLngBounds object*/
     for (var point in points)
     {
          if (points[point]!=null)
          {
               bounds.extend(points[point]);
          }
     }

     /*Calculate the Position and Zoom of the Map*/
     map.setCenter(bounds.getCenter());
     map.setZoom(map.getBoundsZoomLevel(bounds)-1);
}

GLatLngBounds オブジェクトは、最大境界と最小境界を計算するために使用したすべてのポイントを格納するわけではありません。そのため、長方形の境界を再定義するために新しいオブジェクトを作成する必要があります。

また、ここにあるこの機能の例を作成しました 。

必要なものにソース コードを自由に使用してください。それをどのように理解するか、または他に質問がある場合はお知らせください。

コメントなしのコードは次のとおりです。

var bounds = new GLatLngBounds();
var points = {};

function createMarker(location)
{
     var point = new GLatLng(location.lat,location.lon);
     var marker = new GMarker(point);
     marker.myMarkerName = 'uniqueNameToIDMarkerPointLater';
     points[marker.myMarkerName] = point;
     GEvent.addListener(marker,"remove",function()
     {
          zoomToBounds(this.myMarkerName);    
     };
     bounds.extend(point);        
     map.addOverlay(marker);                  
}

function zoomToBounds(name)
{
     points[name]=null;
     bounds = new GLatLngBounds();
     for (var point in points)
     {
          if (points[point]!=null)
          {
               bounds.extend(points[point]);
          }
     }
     map.setCenter(bounds.getCenter());
     map.setZoom(map.getBoundsZoomLevel(bounds)-1);
}
于 2010-04-27T17:26:01.920 に答える