Я боролся с этой функцией в течение нескольких недель, но начинаю думать, что это невозможно.Надеюсь, кто-то здесь может доказать, что я не прав!:)
Использование Mapbox GL.При загрузке страницы карта отображается с маркерами в заданных пределах.Я пытаюсь имитировать функциональность, когда пользователь перетаскивает карту, и на основании новых границ отображаются новые маркеры, а старые удаляются.Данные для новых маркеров являются динамическими на основе запроса API.Мне удалось найти функцию после долгих поисков, чтобы проверить, находится ли точка в границах карты и работает ли она, но, учитывая, как работает функция добавления / удаления маркера, динамические данные, похоже, не подходят.
Я создал скрипку здесь и жестко запрограммировал новую "функцию", но она не прорисовывается.Скорее всего, есть вторая часть этой проблемы, но, возможно, я смогу разобраться сам, когда это будет сочтено возможным
Любой совет будет принят с благодарностью.Заранее спасибо!
geojson.features.forEach(function (marker) {
// create a DOM element for the marker
var el = document.createElement('div');
el.className = 'marker';
el.style.backgroundImage = 'url(https://placekitten.com/g/' + marker.properties.iconSize.join('/') + '/)';
el.style.width = marker.properties.iconSize[0] + 'px';
el.style.height = marker.properties.iconSize[1] + 'px';
el.addEventListener('click', function () {
window.alert(marker.properties.message);
});
// add marker to map
var point = new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates);
map.on("dragend", function() {
if ( inBounds(marker.geometry.coordinates, map.getBounds()) == false ) {
point.remove();
} else {
geojson.features.push({
"type": "Feature",
"properties": {
"message": "Lurman",
"iconSize": [20, 20]
},
"geometry": {
"type": "Point",
"coordinates": [
-59.29223632812499,
-17.28151823530889
]
}
})
point.addTo(map);
}
})
});
function inBounds(point, bounds) {
var lng = (point[0] - bounds._ne.lng) * (point[0] - bounds._sw.lng) < 0;
var lat = (point[1] - bounds._ne.lat) * (point[1] - bounds._sw.lat) < 0;
return lng && lat;
}