正在获取地图框中打开地图的用户位置

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'(函数；中心"；钥匙