如何获取用户的当前位置？

Question

我正在设置一张地图，该地图将使商店位置更接近用户的当前位置。但我无法做到这一点。我浏览了文档，但找不到任何对我的问题有帮助的信息。我想要什么 如果我单击“查找位置”，它应该会显示离我较近的商店。

我已经尝试过放置静态经度和纬度，并且效果很好。我希望它是动态的。

mapboxgl.accessToken = 'THE_ACCESS_TOKEN';

// This adds the map to your page

var map = new mapboxgl.Map({
// container id specified in the HTML
  container: 'map',

   // style URL
  style: 'mapbox://styles/mapbox/light-v10',

 // initial position in [lon, lat] format
  center: [78.3430302, 17.449968],

 // initial zoom

 zoom: 14
});

在中心，我想要动态的经度和纬度值（当前位置）。这样它就会向我显示离我所在位置更近的商店。

Answer 1

Javascript 有一个地理定位 API，您可以使用它而无需导入额外的依赖项，它将为您提供用户的经纬度位置，您可以在此处查看更多信息。

用户必须授予 Web 应用访问其位置的权限。如何在代码中获取坐标的快速示例：

if ("geolocation" in navigator) { 
    navigator.geolocation.getCurrentPosition(position => { 
        console.log(position.coords.latitude, position.coords.longitude); 
    }); 
} else { /* geolocation IS NOT available, handle it */ }

更新：将地理定位代码合并到您的代码中将是这样的（检查它是否是纬度、经度或其他方式）：

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';

// This adds the map to your page

if ("geolocation" in navigator) { 
    navigator.geolocation.getCurrentPosition(position => { 
        var map = new mapboxgl.Map({
        // container id specified in the HTML
          container: 'map',

           // style URL
          style: 'mapbox://styles/mapbox/light-v10',

         // initial position in [lon, lat] format
          center: [position.coords.longitude, position.coords.latitude],

         // initial zoom

         zoom: 14
        });
    }); 
} else { /* geolocation IS NOT available, handle it */ }