[英]Need to remove marker in javascript & Ajax with Mapbox
我試圖在地圖上移動時刪除不在地圖上居中的標記。 我認為這與Ajax的異步方面有關。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>A simple map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiYmxhY2t5IiwiYSI6IjA4NWJjZDNiNDQ0MTg3YjVmZTNkM2NkMWQ3MmM4ZjU4In0.SDQh56AZPCbIL2rVs4eAkQ';
var map = L.mapbox.map('map', 'mapbox.streets').setView([47, 2], 6);
var markerGroup;
map.on('moveend', function(move) {
var coordinates = map.getCenter();
markerGroup.clearLayers; //doesn't work.
$.ajax({
type: 'GET',
url: 'http://private-anon-0b8fcf12d-cartoemploi.apiary-mock.com/geosearch/'+ coordinates.lat + ',' + coordinates.lng,
crossDomain: true,
dataType: 'json',
contentType: "application/json",
success: function(response) {
$.each(response, function(i) {
title = response[i].title;
latitude = response[i].latitude;
longitude = response[i].longitude;
markerGroup = L.mapbox.featureLayer({
// this feature is in the GeoJSON format: see geojson.org
// for the full specification
type: 'Feature',
geometry: {
type: 'Point',
// coordinates here are in longitude, latitude order because
// x, y is the standard for GeoJSON and many formats
coordinates: [
longitude,
latitude
]
},
properties: {
title: title,
description : '',
// one can customize markers by adding simplestyle properties
// https://www.mapbox.com/guides/an-open-platform/#simplestyle
'marker-size': 'large',
'marker-color': '#ffa5ff',
'marker-symbol': 'suitcase'
}
}).addTo(map);
});
}
});
});
... some code
</script>
</body>
</html>
我嘗試了這個:
map.eachLayer(function (layer) {
map.removeLayer(layer);
});
但這會刪除整個地圖,這不是我想要的。
我發現了我的錯誤。 我創建了太多標記。 我將標記放在全局變量markerGroup中的數組中。
var markerGroup = [];
並且我創建了一個清空我的markerGroup的函數。
function clearMarkers() {
markerGroup.forEach(function(marker) {
marker.clearLayers();
});
markerGroup = [];
}
完整代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>A simple map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<input id='search' class='search-ui' placeholder='' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiYmxhY2t5IiwiYSI6IjA4NWJjZDNiNDQ0MTg3YjVmZTNkM2NkMWQ3MmM4ZjU4In0.SDQh56AZPCbIL2rVs4eAkQ';
var map = L.mapbox.map('map', 'mapbox.streets').setView([47, 2], 6);
var markerGroup = [];
function clearMarkers() {
markerGroup.forEach(function(marker) {
marker.clearLayers();
});
markerGroup = [];
}
map.on('moveend', function(move) {
var coordinates = map.getCenter();
console.log(coordinates.lat)
console.log(coordinates.lng)
$.ajax({
type: 'GET',
url: 'http://private-anon-0b8fcf12d-cartoemploi.apiary-mock.com/geosearch/'+ coordinates.lat + ',' + coordinates.lng,
crossDomain: true,
dataType: 'json',
contentType: "application/json",
success: function(response) {
clearMarkers();
$.each(response, function(i) {
title = response[i].title;
latitude = response[i].latitude;
longitude = response[i].longitude;
markerGroup.push(L.mapbox.featureLayer({
// this feature is in the GeoJSON format: see geojson.org
// for the full specification
type: 'Feature',
geometry: {
type: 'Point',
// coordinates here are in longitude, latitude order because
// x, y is the standard for GeoJSON and many formats
coordinates: [
longitude,
latitude
]
},
properties: {
title: title,
description : '',
// one can customize markers by adding simplestyle properties
// https://www.mapbox.com/guides/an-open-platform/#simplestyle
'marker-size': 'large',
'marker-color': '#ffa5ff',
'marker-symbol': 'suitcase'
}
}).addTo(map));
});
}
});
});
$(document).ready(function() {
$.ajax({
type: 'GET',
url: 'http://private-anon-0b8fcf12d-cartoemploi.apiary-mock.com/emploi/',
crossDomain: true,
dataType: 'json',
contentType: "application/json",
success: function(response) {
clearMarkers();
$.each(response, function(i) {
title = response[i].title;
latitude = response[i].latitude;
longitude = response[i].longitude
markerGroup.push(L.mapbox.featureLayer({
// this feature is in the GeoJSON format: see geojson.org
// for the full specification
type: 'Feature',
geometry: {
type: 'Point',
// coordinates here are in longitude, latitude order because
// x, y is the standard for GeoJSON and many formats
coordinates: [
longitude,
latitude
]
},
properties: {
title: title,
description : '',
// one can customize markers by adding simplestyle properties
// https://www.mapbox.com/guides/an-open-platform/#simplestyle
'marker-size': 'large',
'marker-color': '#ffa500',
'marker-symbol': 'suitcase'
}
}).addTo(map));
});
}
});
});
</script>
</body>
</html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.