Блог

Привет, ребята, как мне получить местоположение пользователя в mapbox, как только будет отображен компонент с картой mapbox.

Я видел в их документации, что они предоставили такую опцию, как

 this.map.addControl(
      new mapboxgl.GeolocateControl({
        positionOptions: {
          enableHighAccuracy: true,
        },
        trackUserLocation: true,
      }),

    );
  

при этом после нажатия на символ местоположения отображается мое текущее местоположение, но могу ли я каким-либо образом сделать это изначально? без нажатия кнопки местоположения на карте должно отображаться местоположение пользователя

Вы должны использовать метод map.flyTo() в сочетании с map.on(‘load’) из mapbox.

 map.on('load', function () {
    map.flyTo({
       center: [
          -74.5   (Math.random() - 0.5) * 10, // Example data
          40   (Math.random() - 0.5) * 10 // Example data
       ],
       essential: true // this animation is considered essential with respect to prefers-reduced-motion
    });
}
  

Как вы заметили, вам нужны координаты пользователя, чтобы использовать функцию flyTo.

Для их получения у вас есть два предупреждения:

1. Пользователь авторизовал местоположение браузера -> использовать местоположение браузера

 if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    coordinates = [position.coords.latitude, position.coords.longitude];
  });
}
  

2. Пользователь не авторизовал местоположение браузера -> использовать API геолокации IP

Вы можете использовать API геолокации IP, например Abstract, для определения местоположения ваших посетителей:

 $.getJSON("https://ipgeolocation.abstractapi.com/v1/?api_key=**********", function(data) {
       console.log(data.longitude);
       console.log(data.latitude);
       coordinates = [data.longitude,data.latitude]
   })
  

Затем вы можете загрузить функцию map.on (‘load’), написанную выше, и вставить координаты для клавиши «center».