0

データベースに保存されている場所のマーカーをGoogleマップに入力し、ユーザーが削除するマーカーをダブルクリックして任意のマーカーを削除できるようにしたい。以下のコードを使用するとマップにデータが入力されますが、いずれかのマーカーをダブルクリックすると、最後のマーカーが削除されます。

ダブルクリックイベントリスナーが現在のマーカーに毎回再割り当てされているため、これが発生していると思いますが、これを停止する方法を理解できません。

ここにjsFiddleを設定していますhttp://jsfiddle.net/simonbarker/TA4HP/

var markers = {"locations": [{"name" : "UK 1", "date" : "Nov 1", "lat" : 51, "lng" : 0.164},
                               {"name" : "France 1", "date" : "Nov 2", "lat" : 50, "lng" : 0.164},
                               {"name" : "France 2", "date" : "Nov 2", "lat" : 49, "lng" : 0.164}]
                };

  var map;
  var center = new google.maps.LatLng(markers.locations[1].lat,markers.locations[1].lng);

  var mapOptions = {
    zoom: 8,
    center: center,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  createMarkers();


  //create markers by traversing throught the markers object
  function createMarkers(){

    var i = 0;
    while(markers.locations[i]){

      var marker = new google.maps.Marker({
          position: new google.maps.LatLng(markers.locations[i].lat, markers.locations[i].lng),
          animation: google.maps.Animation.DROP,
          map: map
      });

      //store marker in the locations object
      markers.locations[i].marker = marker;

      //add delete handler
      google.maps.event.addListener(marker, 'dblclick', function(event) {
        marker.setMap(null);
        delete markers.locations[i];
      });

      i++;

    }
  }​

どんな助けでも素晴らしいでしょう

アップデート：

削除ハンドラー関数をに変更することでこれを解決しました

//add delete handler
          google.maps.event.addListener(marker, 'dblclick', function(event) {
            this.setMap(null);
            delete markers.locations[this.id];
          });

作成時にマーカーにIDを追加します

var marker = new google.maps.Marker({
              id: i, 
              position: new google.maps.LatLng(markers.locations[i].lat, markers.locations[i].lng),
              animation: google.maps.Animation.DROP,
              map: map
          });
4

2 に答える 2

1

クロージャーを取得するには、別の関数でマーカーを作成する必要があります

これと同じ答え

ここで説明します。

于 2012-11-03T15:57:32.517 に答える
0

オブジェクトを配列またはdictに格納して、後でこの行でオブジェクトを参照して削除できるようにします...

map.removeOverlay(marker);
于 2012-11-03T15:50:31.433 に答える