web-dev-qa-db-ja.com

Google Maps Api 3選択したマーカーのみを削除

私は次のように2つの機能を持っています：

_function addMarker() {
    marker = new google.maps.Marker({
        position: Gpoint,
        map: map,
        draggable: true,
        animation: google.maps.Animation.DROP
    });
    map.panTo(Gpoint);

    google.maps.event.addListener(marker, "rightclick", 
    function (point) { 
    showContextMarker(point.latLng); } ); 
    $('.contextmenu').remove();
};

function delMarker() { marker.setMap(null); $('.contextmenu').remove(); };
_

だから、理解できるように、「マーカーを削除」オプションを持つコンテキストメニューがあります。このメニューを表示するために、マーカーの追加中に「右クリック」リスナーをバインドしています。

この時点まで、すべてが問題なく機能しています。

しかし、マーカーをクリックして削除しようとすると、最後に追加されたマーカーのみに影響します。もう一度試してみると何も起こりません。

したがって、私の考えは、クリックされたマーカーのID（または有用なもの）を取得し、これに従ってこの削除機能を実行することです。

簡単に複数のマーカーがある地図から、クリックしたマーカーを削除したい。

この問題を解決する方法はありますか？

前もって感謝します！

解決しよう！

これが解決策です。ファティ、ありがとう。あなたの指導なしでは不可能でした：

_var id;
var markers = {};
var addMarker = function () {
    marker = new google.maps.Marker({ 
        position: Gpoint,
        map: map,
        draggable: true,
        animation: google.maps.Animation.DROP
    });
    map.panTo(Gpoint);
    id = marker.__gm_id
    markers[id] = marker; 

    google.maps.event.addListener(marker, "rightclick", function (point) { id = this.__gm_id; delMarker(id) });
}

var delMarker = function (id) {
    marker = markers[id]; 
    marker.setMap(null);
}
_

削除関数の呼び出し：delMarker(id) Ps：「この場合、右クリックで十分です」

ありがとうございました！

google-maps-api-3selectedmarker
22
MrGorki

jsFiddleの作業サンプル

Googleマップはマーカーを管理しません。したがって、すべてのマーカーは自分で管理する必要があります。

グローバルマーカーオブジェクトを作成し、このオブジェクトにすべてのマーカーをプッシュします。また、マーカーインスタンスを取得するときに、各マーカーに一意のIDを与えます。次に、マーカーを削除する場合、そのIDを取得してグローバルマーカーオブジェクトでこのマーカーを見つけ、最後にnull引数を渡してこのマーカーインスタンスのsetMapメソッドを呼び出します。

また、jsFiddleで動作するデモを追加しました。コードは詳細に文書化されています。

擬似コードは次のようになります。 より詳細なコードについては、デモをご覧ください。

 var currentId = 0; 
 var uniqueId = function（）{
 return ++ currentId; 
} 
 
 varマーカー= {}; 
 var createMarker = function（）{
 var id = uniqueId（）; //新しいid 
を取得しますvar marker = new google.maps.Marker（{//マーカーを作成してid 
 id：id、
 position：Gpoint、[.____を設定します。] map：map、
 draggable：true、
 animation：google.maps.Animation.DROP 
}）; 
 marker [id] = marker; //作成されたマーカーを、IDをキーとするマーカーオブジェクトにキャッシュします。
 return marker; 
} 
 var deleteMarker = function（id）{
 var marker = marker [ id]; //指定されたidでマーカーを検索します
 marker.setMap（null）; 
}
43
Fatih

@Fatihの回答を補完するために、マーカーを管理する必要があります。たとえば、配列内の各マーカーを追加してから削除するには、このマーカーを配列内に見つけて、マップのvalをnullに設定します。

2
Jorge

右クリック機能でマーカーを渡すだけです。例えば：

var marker = new google.maps.Marker({
    position: event.latLng,
    map: map,
    draggable: true,
    title: 'Hello World!'
});
google.maps.event.addListener(marker, "rightclick", function (point) {delMarker(marker)});

そして、関数を次のようにします。

var delMarker = function (markerPar) {
    markerPar.setMap(null);
}

マーカーは右クリックで削除できます。

2
Vinícius Biavatti

これは私のために働いた：

2番目のcurrentId、より良いアイデアがあれば、教えてください

var actualMarkerId = 0;
var currentId = 0;



    if (actualMarkerId>0) {
        deleteMarker(actualMarkerId);
        console.log(actualMarkerId);
    }
    var id = uniqueId(); // get new id
    actualMarkerId = id;
1
Brian Sanchez

シンプル、マーカーオブジェクトにグローバル配列を使用。プロットマーカーにその配列のマーカーオブジェクトをプッシュします。はい、一意の参照用にマーカーオブジェクトでIDを使用できます。

以下のコード

MarkerArray = []

marker = new google.maps.Marker({
         Id: 1,
         position: new google.maps.LatLng(Lat,Long),
         type: 'info'         
          });

MarkerArray.Push(marker);

特定のマーカーを削除するには、各マーカーの一意のIDを使用してその要素インデックスを見つけます。

var MarkerIndex = MarkerArray.findIndex(function GetIndex(element) {
            return element.Id == 1;
});    
MarkerArray[MarkerIndex].setMap(null);
MarkerArray.splice(MarkerIndex, 1); // to remove element from global array
0
Vigneh Sundar

最小限の変更用

var newid=0;

for (var index in results){

var marker = new google.maps.Marker({

map: map,
icon: image,

__gm_id: = newid+1,

});
}

現在、marker ['__ gm_id']にはまだ値があります

0
user1426141