23

私は以下のように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: 「この場合は右クリックで十分です」

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

4

6 に答える 6

49

jsFiddle での作業サンプル

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

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

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

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

var currentId = 0;
var uniqueId = function() {
    ++currentId を返します。
}

var マーカー = {};
var createMarker = function() {
    var id = uniqueId(); // 新しい ID を取得
    var marker = new google.maps.Marker({ // マーカーを作成して ID を設定する
        やった、
        位置：Gポイント、
        マップ: マップ、
        ドラッグ可能: true,
        アニメーション: google.maps.Animation.DROP
    });
    マーカー[id] = マーカー; // 作成されたマーカーを、ID をキーとしてマーカー オブジェクトにキャッシュします
    マーカーを返します。
}
var deleteMarker = 関数 (id) {
    var マーカー = マーカー[id]; // 指定された ID でマーカーを見つける
    マーカー.setMap(null);
}
于 2011-12-15T14:49:57.723 に答える
2

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

于 2011-12-15T14:55:07.700 に答える
1

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

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

var actualMarkerId = 0;
var currentId = 0;



    if (actualMarkerId>0) {
        deleteMarker(actualMarkerId);
        console.log(actualMarkerId);
    }
    var id = uniqueId(); // get new id
    actualMarkerId = id;
于 2013-08-24T15:16:53.707 に答える