Estoy tratando de agregar marcadores de mapa a mi mapa de folleto, usando las coordenadas devueltas de una llamada a una API. Originalmente establecí el marcador del mapa en una ubicación específica (el folleto no estaba contento con una matriz en blanco), luego actualizo la variable del marcador cuando un usuario selecciona un país de una lista desplegable. Puedo ver que la variable del marcador se actualiza después de cada selección de usuario, pero el marcador en el mapa no cambia de ubicación. Aquí están las partes del código JS involucradas:
let baseMaps = { "Hybrid": hybrid, "Terrain": terrain, "Streets": streets, "Sat": sat, "Pulchritudinous": pulchritudinous, }; //variable to hold coordinates of marker let markerTest = L.marker([54, -2]); let overlayMaps = { "Marker" : markerTest }; let map = L.map('map', { layers: [pulchritudinous, streets, sat, terrain, hybrid, markerTest] }); //add baselayers to map L.control.layers(baseMaps, overlayMaps).addTo(map);aquí está la llamada api y el código de retorno;
function markers(){ $.ajax({ url: "libs/php/markerCapital.php", type: 'GET', dataType: 'json', data: { country: country, }, success: function(result) { // console.log(JSON.stringify(result, null, 4)); if (result.status.name == "ok") { console.log("success markerCaptial"); //reset cities array cities = []; //populate cities array with data for(let i = 0; i < result.data.geonames.length; i++){ cities.push([result.data.geonames[i].asciiName, result.data.geonames[i].lat, result.data.geonames[i].lng, result.data.geonames[i].population]); } //Add to map markerTest = L.marker([cities[0][1], cities[0][2]]); console.log("MARKER TEST: ", markerTest); } }se llama a markers() cada vez que un usuario cambia de ubicación.
Encontré la solución. En la respuesta a la llamada de API, actualice markerTest de la siguiente manera:
markerTest.setLatLng([cities[0][1], cities[0][2]]).update(); console.log("MARKER TEST: ", markerTest);No estoy seguro de que sea la mejor manera de hacerlo, pero funciona.