Uso de una variable para map.setcenter en mapbox gl js

Question

Estoy tratando de establecer el centro de mi mapa usando coordenadas pasadas a la página a través de la url. Puedo recuperar las coordenadas, pero me da este error cuando trato de usarlas:

Uncaught Error: LngLatLike debe especificarse como una instancia de LngLat, un objeto {lng: , lat: }, o una matriz de [, ]

Obtengo las coordenadas así

function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + 
'=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [null, ''])[1].replace(/\+/g, '%20')) || null;
}
var center =getURLParameter('location');

abrir mi mapa con

    mapboxgl.accessToken = 'pk.eyJ1IjoidHJveWIiLCJhIjoiY2pkb3F0cmJnMHA0YTJ4cXB3Mjc0Y3g0eCJ9.3Myq7AzC4yxR8hi9Ubchdw';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
        center: [-88.75, 42.15],
        zoom: 8
    });

y cargar mis capas y establecer el centro de mi mapa en

map.on('load', function() { 

map.setCenter(center);

mi url tiene este aspecto: http://mywebsite.com/Map.html?location=-84.83762741088867,43.179770125276974&name=otherdata

Puedo obtener el valor del nombre y utilizarlo para especificar mi capa de mapa.

Answer 1

Paso 1:

Su método getURLParameter("location") devuelve los valores de latitud y longitud en forma de cadena "-84.83762741088867,43.179770125276974"

Paso 2:

Almacenar los valores devueltos en una variable

//Devolverá una cadena

var center = getURLParameter("location");

//Devolverá un array ["latitud", "longitud"]

var latLng = center.split(","); 

//convertir el primer elemento del array en float num

var lat = parseFloat(latLng[0]);

//convertir el segundo elemento del array en float num

var lng = parseFloat(latLng[1]); 

Paso 3:

Pase los valores de latitud y longitud convertidos directamente a Mapbox GL para centrar su mapa.

mapboxgl.accessToken = 'pk.eyJ1IjoiZmFyaGF0YWJiYXMiLCJhIjoiY2plODE2NGgxMDRhdjMzcGV6a3QxaGE4OSJ9.O7Gu6jLiZe2y_gPK6AZJyA';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
    center: [lng, lat], // starting position [lng, lat]
    zoom: 9 // starting zoom
});

o utilizar el método MapboxGL flyTo

map.flyTo({center:[lng, lat]});

Answer 2

Su función getURLParameter devuelve una cadena como "-84.83762741088867,43.179770125276974", pero map.setCenter necesita un LngLatLike Es decir, algo así.

var v1 = new mapboxgl.LngLat(-122.420679, 37.772537);
var v2 = [-122.420679, 37.772537];

Puede utilizar el dividir para obtener un array asumiendo que su parámetro de localización está esperando lng,lat. Si lat,lng entonces tendrás que intercambiar el orden antes de pasar el array a setCenter.