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

问题描述

伙计们，一旦具有mapBox地图的组件被渲染，我如何在mapBox中获得用户位置。

我在他们的文档中看到他们提供了类似的选项

this.map.addControl(
      new mapBoxgl.GeolocateControl({
        positionoptions: {
          enableHighAccuracy: true,},trackUserLocation: true,}),);

在按一下位置符号后，它会显示我当前的位置，但是我有什么办法可以初始化？无需单击位置按钮，地图应显示用户位置

解决方法

您应该将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'）函数，并粘贴“中心”键的坐标。