javascript - Recenter Mapbox map 使用用户坐标

Question

已尝试 1.5 小时。有人可以帮帮我吗？ “您的帖子似乎包含格式不正确的代码”问题。有人可以帮我格式化这段代码吗？它现在在这篇文章中有效，但在制作新文章时无效......现在我一天都发不了新帖子了……什么……

已修复:浏览器输出似乎必须采用代码布局。

这是我最初的问题:

标题:使用地理定位 API - 范围问题

大家好

我正在使用 Mapbox 并尝试更新变量 lngreal 和 latreal(从默认的 Greenwhich 坐标)。函数 initializeMap() 在设置期间被调用，其想法是如果可能的话用用户的 longlat 坐标更新它。当我运行下面的代码时...

function initializeMap() {

    mapboxgl.accessToken = 'HIDDEN FOR THIS POST';

    var lngreal = 0.0098;
    var latreal = 51.4934;

    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(displayLocationInfo);

    }

    function displayLocationInfo(position) {
        //Why does this not work to update the map zoom?

        lngreal = position.coords.longitude;
        latreal = position.coords.latitude;
        console.log(lngreal);
        console.log(latreal);
    }

    console.log(lngreal);
    console.log(latreal);



    // 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: [lngreal, latreal],
        // initial zoom

        zoom: 14
    });

   // More code after this but not related

}

它在 html 检查器控制台中显示以下内容:

play-mapboxscripts.js:21 0.0098  
play-mapboxscripts.js:22 51.4934  
play-mapboxscripts.js:17 4.9212796  
play-mapboxscripts.js:18 52.333704999999995  

1. 为什么它首先显示最后的 console.log 行，而不是 displayLocationInfo 函数中的 console.log 行？那个函数不是在之前的 navigator.geolocation 函数中调用的吗？

2. 我无法正确更新 lngreal 和 latreal 变量以匹配用户的位置。它们将默认返回 0.0098 和 51.4934，加载的 map (var map )将显示默认的 Greenwhich 位置。这是否与 displayLocationInfo 函数的可变范围有关？

Answer 1

它首先显示最后两个控制台日志，因为 displayLocationInfo 是异步方法 getCurrentPosition 的回调，因此必须等到该进程解决后才能记录新坐标。

要使用新坐标使 map 重新居中，您需要执行以下操作:

function displayLocationInfo(position) {
  const { coords: { latitude, longitude } } = position;

  // Get a new lat/lng object
  // https://docs.mapbox.com/mapbox-gl-js/api/#lnglatlike
  const center = new mapboxgl.LngLat(longitude, latitude);

  // Center the map
  // https://docs.mapbox.com/mapbox-gl-js/api/#map#setcenter
  map.setCenter(center);
}