Googleマップからマーカーを削除するにはどうすればよいですか？

Question

地図上のマーカをクリックして削除してください。

私はスクリプトを書いています。マーカーはマウスの左ボタンをクリックした後に作成されます。マーカーをマウスの右ボタンでクリックした後、マーカーを削除する必要があります。

ただし、1つのマーカーに対してのみ機能します。 2つ、3つまたは4つのマーカーの場合、スクリプトは機能していません。問題を解決するのを手伝ってください。

JS：

var map; 

function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 4, 
    center: {lat: -25.363, lng: 131.044} 
    }); 

    renderMarkers(); 

    map.addListener('click', function(e) { 
    var lat = e.latLng.lat(); 
    var lng = e.latLng.lng();  
    var id = 'id_' + Date.now() + lat.toFixed(2) + lng.toFixed(2); 
    generateMarker(lat, lng, id);  
    }); 
} 

function getMarkersFromLocalStorage() { 
    return localStorage.markers ? JSON.parse(localStorage.markers) : {}; 
}; 

function addMarkerToLocalStorage(lat, lng, id) { 
    var markers = getMarkersFromLocalStorage(); 
    markers[id] = { 
    lat: lat, 
    lng: lng 
    }; 
    localStorage.markers = JSON.stringify(markers); 
}; 

function removeMarkerFromLocalStorage(id) { 
    console.log('removeMarkerFromLocalStorage'); 
    var markers = getMarkersFromLocalStorage(); 
    delete markers[id]; 
    localStorage.markers = JSON.stringify(markers); 
}; 

function renderMarkers() { 
    var markers = getMarkersFromLocalStorage(); 

    for(prop in markers) { 
    generateMarker(markers[prop].lat, markers[prop].lng); 
    }; 
}; 

function generateMarker(lat, lng, id) { 
    var marker = new google.maps.Marker({ 
    position: {lat: lat, lng: lng}, 
    map: map, 
    id: id 
    }); 
    addMarkerToLocalStorage(lat, lng, id); 

    marker.addListener('rightclick', function(e) { 
    var m = marker; 
    console.log(e, m['id']);  
    removeMarkerFromLocalStorage(m['id']); 
    this.setMap(null); 
    renderMarkers(); 
    }); 

}; 

Answer 1

私はあなたのコード内でいくつかの問題を見ることができます：

1. あなたはマーカーの右クリックハンドラでrenderMarkers();を呼ぶ理由は明確ではありません。この方法で、以前のものを削除せずにマップ上に新しいマーカーを再追加します。 renderMarkers()機能で

2. あなたがマーカーにIDを行方不明につながり、あなたは右クリックハンドラでm['id']ためundefined値を持つgenerateMarker()機能で三番目のパラメータが欠落しているマーカーを生成します。

3. idプロパティは、MarkerOptionsオブジェクト仕様にはありません。私は後に、私はあなたの例を変更したし、正常に動作しているようmarker.id = id;

のようなマーカーのインスタンスを作成し、IDを割り当てることがより安全であると考えています。変更されたコードを見てください。

var map; 
 

 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 4, 
 
    center: {lat: -25.363, lng: 131.044} 
 
    }); 
 

 
    renderMarkers(); 
 

 
    map.addListener('click', function(e) { 
 
    var lat = e.latLng.lat(); 
 
    var lng = e.latLng.lng();  
 
    var id = 'id_' + Date.now() + lat.toFixed(2) + lng.toFixed(2); 
 
    generateMarker(lat, lng, id);  
 
    }); 
 
} 
 

 
function getMarkersFromLocalStorage() { 
 
    return localStorage.markers ? JSON.parse(localStorage.markers) : {}; 
 
}; 
 

 
function addMarkerToLocalStorage(lat, lng, id) { 
 
    var markers = getMarkersFromLocalStorage(); 
 
    markers[id] = { 
 
    lat: lat, 
 
    lng: lng 
 
    }; 
 
    localStorage.markers = JSON.stringify(markers); 
 
}; 
 

 
function removeMarkerFromLocalStorage(id) { 
 
    console.log('removeMarkerFromLocalStorage'); 
 
    var markers = getMarkersFromLocalStorage(); 
 
    delete markers[id]; 
 
    localStorage.markers = JSON.stringify(markers); 
 
}; 
 

 
function renderMarkers() { 
 
    var markers = getMarkersFromLocalStorage(); 
 

 
    for(prop in markers) { 
 
    generateMarker(markers[prop].lat, markers[prop].lng, prop); 
 
    }; 
 
}; 
 

 
function generateMarker(lat, lng, id) { 
 
    var marker = new google.maps.Marker({ 
 
    position: {lat: lat, lng: lng}, 
 
    map: map 
 
    }); 
 
    marker.id = id; 
 
    addMarkerToLocalStorage(lat, lng, id); 
 

 
    marker.addListener('rightclick', function(e) { 
 
    var m = this; 
 
    console.log(e, m['id']);  
 
    removeMarkerFromLocalStorage(m['id']); 
 
    this.setMap(null); 
 
    }); 
 

 
};

#map { 
 
    height: 100%; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div id="map"> 
 
</div> 
 
<script src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap" 
 
    async defer></script>

ローカルストレージがSOフィドルでは利用できないように見えます、私はこのことができます願っていhttps://jsfiddle.net/xomena/fyma08ov/

でコードを確認することができます！