使用用户坐标重新定位 Mapbox 地图答案

【问题标题】：Recenter Mapbox map using user coords使用用户坐标重新定位 Mapbox 地图
【发布时间】：2019-10-14 14:26:39
【问题描述】：

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

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

这是我最初的问题：

TITLE：使用地理定位 API - 范围问题

大家好

我正在使用 Mapbox 并尝试更新 vars 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

为什么它首先显示最后的 console.log 行，而不是 displayLocationInfo 函数中的 console.log 行？那个函数不是在navigator.geolocation函数中调用的吗，在它之前呢？
我无法正确更新 lngreal 和 latreal 变量以匹配用户的位置。它们将默认返回 0.0098 和 51.4934，加载的地图（var map）将显示默认的 Greenwhich 位置。这是否与 displayLocationInfo 函数的变量范围有关？

【问题讨论】：

我投票结束这个问题作为离题，因为这似乎是 SO 本身的问题，所以应该去 meta.stackoverflow.com
我添加了一些示例代码，希望对您有所帮助。
将代码包装在```
不，不要。改用缩进。标记它并按 Ctrl+K
不要提出新问题。编辑这个。包括代码是如何失败的、您遇到了什么错误以及确切的问题是什么。

标签： javascript function scope mapbox

【解决方案1】：

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

要使用新坐标重新定位地图，您需要执行以下操作：

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);
}

【讨论】：

根据文档和“LngLat”的名称，顺序应该是（经度，纬度）而不是（纬度，经度）。

【解决方案2】：

感谢 Andy 和 @Chris G。我不知道异步函数，很高兴现在阅读它们。很有帮助。

我有一个与此主题相关的回调问题。函数如何知道某事是回调；某些 I/O 完成后需要执行的操作。它怎么知道它不应该立即执行？它是否以（标准化）方式在函数中定义？

据我所知，参数中经常使用的“回调”关键字只是一种常见做法，但不会自动让函数将参数解释为在某些 I/O 完成后应该开始的东西。

以下面的例子，我有三个问题（取自https://medium.com/codebuddies/getting-to-know-asynchronous-javascript-callbacks-promises-and-async-await-17e0673281ee）：

const request = require(‘request’);
function handleResponse(error, response, body){
    if(error){
        // Handle error.
    }
    else {
        // Successful, do something with the result.
    }
}
request('https://www.somepage.com', handleResponse);

'require' 函数的结构是什么样的，以便它知道一旦请求完成就应该执行参数 2（在这种情况下为 handleResponse）？我想这可以归结为我上面问的同一个问题。
即使函数中没有 async 关键字，函数也可以是异步的吗？如果是，浏览器怎么知道它是一个异步函数？
在我的代码中，是否可以让浏览器/脚本等待剩余代码的执行，直到 navigator.geolocation.getCurrentPosition 完成执行并因此更新 lngreal latreal 坐标？

【讨论】：