refiriéndose a una demostración de codepen en https://codepen.io/Maximusssssu/pen/zYpZYZX?editors=1111 . Como puede ver cuando hace clic en el mapa, colocará un marcador, ¿puedo saber cómo agregar múltiples marcadores para que el marcador anterior que he agregado no desaparezca? Preferiría que las coordenadas (latitide, longitud) se almacenen en una matriz. Por favor, muestra una demostración para entender :)
function add_marker (event) { var coordinates = event.lngLat; console.log('Lng:', coordinates.lng, 'Lat:', coordinates.lat); marker.setLngLat(coordinates).addTo(map); } map.on('click', add_marker);En primer lugar, cree una variable de matriz que recopile los marcadores. const c = [];
Luego agregue esta función a su código:
function createMarker(){ for(var i = 0; i < c.length; i++){ const marker = new mapboxgl.Marker({}) .setLngLat([c[i].lng, c[i].lat]) .addTo(map); } } En su función add_marker, debe enviar las coordenadas a la matriz c . Y luego llame a esta función dentro de su función add_marker. Esta función itera todos los marcadores y los coloca en su mapa.
**ejemplo / NOTA: no se ejecutará en stackoverflow porque no incluyo el cdn de mapbox **
// TO MAKE THE MAP APPEAR YOU MUST // ADD YOUR ACCESS TOKEN FROM // https://account.mapbox.com mapboxgl.accessToken = 'pk.eyJ1Ijoicm9ubSIsImEiOiI3MUpLb2o0In0.NaLkJ3qZjdty3REWEZbodA'; const map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11', center: [12.550343, 55.665957], zoom: 8 }); // Create a default Marker and add it to the map. var marker = new mapboxgl.Marker({}); let c = [] function add_marker (event) { var coordinates = event.lngLat; console.log('Lng:', coordinates.lng, 'Lat:', coordinates.lat); c.push(coordinates); createMarker(); } map.on('click', add_marker); function createMarker(){ for(var i = 0; i < c.length; i++){ const marker = new mapboxgl.Marker({}) .setLngLat([c[i].lng, c[i].lat]) .addTo(map); } } body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } <div id="map"></div> En primer lugar , cambie el marcador var en su alcance global var marker = []; // instead: new mapboxgl.Marker({});
Añadir esta función
function clearing() { for (var i = marker.length - 1; i >= 0; i--) { marker[i].remove(); } } Y reemplaza este ciclo en tu función createMarker()
for(var i = 0; i < c.length; i++){ let m = new mapboxgl.Marker({}) .setLngLat([c[i].lng, c[i].lat]) .addTo(map); marker.push(m); }