在 mapbox 中打开地图时获取用户位置

Question

嘿伙计们，我如何在渲染带有 mapbox 地图的组件后立即在 mapbox 中获取用户位置。

我在他们的文档中看到他们提供了一个选项，例如

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

    );

这是做什么的，在点击位置符号后它会显示我当前的位置，但是有什么办法可以让我最初做到这一点吗？无需单击位置按钮，地图应显示用户位置

Answer 1

您应该将 map.flyTo() 方法与 mapbox 中的 map.on('load') 结合使用。

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。用户未授权浏览器位置 -> 使用 IP 地理定位 API

您可以使用像 Abstract 这样的 IP 地理定位 api 来获取访问者的位置：

$.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') 函数并传递“中心”键的坐标。

在 mapbox 中打开地图时获取用户位置

Getting user location on opening map in mapbox

mapbox

mapbox-gl

mapbox-gl-js