私はリーフレットをオープンソースマップとして使い始めました http://leaflet.cloudmade.com/
次のjQueryコードを使用すると、マップクリックでマップ上にマーカーを作成できます。
map.on('click', onMapClick);
function onMapClick(e) {
var marker = new L.Marker(e.latlng, {draggable:true});
map.addLayer(marker);
marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
};
しかし、現在、(コード内で)既存のマーカーを削除したり、マップ上で作成したすべてのマーカーを見つけて配列に配置する方法はありません。誰もこれを行う方法を理解するのに役立ちますか?リーフレットのドキュメントはこちらから入手できます。 http://leaflet.cloudmade.com/reference.html
関数から「varマーカー」を配置する必要があります。その後、後でアクセスできます。
var marker;
function onMapClick(e) {
marker = new L.Marker(e.latlng, {draggable:true});
map.addLayer(marker);
marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
};
それじゃあ、後でね :
map.removeLayer(marker)
ただし、そのたびに最新のマーカーを使用できます。そのたびに、varマーカーが最新のマーカーによって消去されるためです。そのための1つの方法は、マーカーのグローバル配列を作成し、マーカーをグローバル配列に追加することです。
マーカーを配列にプッシュすることもできます。コード例を参照してください、これは私のために機能します:
/*create array:*/
var marker = new Array();
/*Some Coordinates (here simulating somehow json string)*/
var items = [{"lat":"51.000","lon":"13.000"},{"lat":"52.000","lon":"13.010"},{"lat":"52.000","lon":"13.020"}];
/*pushing items into array each by each and then add markers*/
function itemWrap() {
for(i=0;i<items.length;i++){
var LamMarker = new L.marker([items[i].lat, items[i].lon]);
marker.Push(LamMarker);
map.addLayer(marker[i]);
}
}
/*Going through these marker-items again removing them*/
function markerDelAgain() {
for(i=0;i<marker.length;i++) {
map.removeLayer(marker[i]);
}
}
マーカーの追加、マーカーの削除のコードとデモを次に示します。 -)および存在する/追加されたすべてのマーカーを取得する:
JSFiddle code 全体がここにあります。こちらも full page demo です。
// Script for adding marker on map click
map.on('click', onMapClick);
function onMapClick(e) {
var geojsonFeature = {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [e.latlng.lat, e.latlng.lng]
}
}
var marker;
L.geoJson(geojsonFeature, {
pointToLayer: function(feature, latlng){
marker = L.marker(e.latlng, {
title: "Resource Location",
alt: "Resource Location",
riseOnHover: true,
draggable: true,
}).bindPopup("<input type='button' value='Delete this marker' class='marker-delete-button'/>");
marker.on("popupopen", onPopupOpen);
return marker;
}
}).addTo(map);
}
// Function to handle delete as well as other events on marker popup open
function onPopupOpen() {
var tempMarker = this;
// To remove marker on click of delete button in the popup of marker
$(".marker-delete-button:visible").click(function () {
map.removeLayer(tempMarker);
});
}
// getting all the markers at once
function getAllMarkers() {
var allMarkersObjArray = []; // for marker objects
var allMarkersGeoJsonArray = []; // for readable geoJson markers
$.each(map._layers, function (ml) {
if (map._layers[ml].feature) {
allMarkersObjArray.Push(this)
allMarkersGeoJsonArray.Push(JSON.stringify(this.toGeoJSON()))
}
})
console.log(allMarkersObjArray);
}
// any html element such as button, div to call the function()
$(".get-markers").on("click", getAllMarkers);
jsFiddle を使用すると、onMapClick
メソッドを使用してマーカーを作成し、リンクをクリックしてマーカーを削除できます。
このプロセスは未定義のものに似ています-新しいマーカーをmarkers
配列に追加して、後でやり取りしたいときに特定のマーカーにアクセスできるようにします。
(1)レイヤーを保持するレイヤーグループと配列を追加し、グローバル変数としてレイヤーを参照します。
var search_group = new L.LayerGroup(); var clickArr = new Array();
(2)地図を追加する
(3)マップにグループレイヤーを追加する
map.addLayer(search_group);
(4)マップへの追加機能。リンクを含むポップアップがあり、クリックすると削除オプションが表示されます。このリンクは、そのIDとしてポイントの緯度経度を持ちます。このIDは、作成されたマーカーの1つをクリックして削除する場合と比較されます。
map.on('click', function(e) {
var clickPositionMarker = L.marker([e.latlng.lat,e.latlng.lng],{icon: idMarker});
clickArr.Push(clickPositionMarker);
mapLat = e.latlng.lat;
mapLon = e.latlng.lng;
clickPositionMarker.addTo(search_group).bindPopup("<a name='removeClickM' id="+e.latlng.lat+"_"+e.latlng.lng+">Remove Me</a>")
.openPopup();
/* clickPositionMarker.on('click', function(e) {
markerDelAgain();
}); */
});
(5)削除機能。マーカーlat longを削除で発生したIDと比較します。
$(document).on("click","a[name='removeClickM']", function (e) {
// Stop form from submitting normally
e.preventDefault();
for(i=0;i<clickArr.length;i++) {
if(search_group.hasLayer(clickArr[i]))
{
if(clickArr[i]._latlng.lat+"_"+clickArr[i]._latlng.lng==$(this).attr('id'))
{
hideLayer(search_group,clickArr[i]);
clickArr.splice(clickArr.indexOf(clickArr[i]), 1);
}
}
}
追加機能でマーカーにre敬の念を保存すると、マーカーは自己を削除できます。配列は必要ありません。
function addPump(){
var pump = L.marker(cords,{icon: truckPump}).addTo(map).bindPopup($('<a href="#" class="speciallink">Remove ME</a>').click(function() {
map.removeLayer(pump);
})[0]);
}
layerGroup
を試しましたか?
ここのドキュメント https://leafletjs.com/reference-1.2.0.html#layergroup
レイヤーを作成し、このレイヤーにすべてのマーカーを追加するだけで、マーカーを簡単に見つけて破壊できます。
var markers = L.layerGroup()
const marker = L.marker([], {})
markers.addLayer(marker)
私の場合は、さまざまなレイヤーグループがあり、ユーザーは同様のタイプのマーカーのクラスターを表示/非表示できます。ただし、いずれにしても、レイヤーグループをループしてマーカーを見つけて削除することにより、個々のマーカーを削除します。ループ中に、マーカーがレイヤーグループに追加されたときに追加されたカスタム属性(この場合は「キー」)を持つマーカーを検索します。タイトル属性を追加するように「キー」を追加します。後にこれはレイヤーオプションになります。一致するものが見つかったら、.removeLayer()を実行すると、その特定のマーカーが削除されます。それがあなたを助けることを願っています!
eventsLayerGroup.addLayer(L.marker([tag.latitude, tag.longitude],{title:tag.title, layer:tag.layer, timestamp:tag.timestamp, key:tag.key, bounceOnAdd: true, icon: L.AwesomeMarkers.icon({icon: 'vignette', markerColor: 'blue', prefix: '', iconColor: 'white'}) }).bindPopup(customPopup(tag),customOptions).on('click', markerClick));
function removeMarker(id){
var layerGroupsArray = [eventsLayerGroup,landmarksLayerGroup,travelerLayerGroup,marketplaceLayerGroup,myLayerGroup];
$.each(layerGroupsArray, function (key, value) {
value.eachLayer(function (layer) {
if(typeof value !== "undefined"){
if (layer.options.layer){
console.log(layer.options.key);
console.log(id);
if (id === layer.options.key){
value.removeLayer(layer);
}
}
}
});
});
}