在传单中查找用户位置并将其设置在地图上答案

【问题标题】：finding users location in leaflet and set it on map在传单中查找用户位置并将其设置在地图上
【发布时间】：2021-06-28 13:32:43
【问题描述】：

我有一张地图，上面有一些标记。我想做的是，如果用户来自城市a，则地图在城市a 上启动，如果用户来自城市b，则地图从b 启动。所以现在我所拥有的如下：

  var myMap = new L.Map('map', {
        maptype: 'dreamy',
        poi: true,
        traffic: true,
        center: [35.699739, 51.338097],
        zoom: 8
    });

根据文档，我添加了中心，这是一个 latlong 数组，现在我想获取用户位置并设置它而不是中心。

【问题讨论】：

标签： javascript dictionary leaflet

【解决方案1】：

要获取用户的位置，您需要使用Javscript Geolocation API。

基于W3 Schools的示例：

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition((position) => {
        var myMap = new L.Map('map', {
            maptype: 'dreamy',
            poi: true,
            traffic: true,
            center: [position.coords.latitude, position.coords.longitude],
            zoom: 8
        });
        
        // ... do more stuff with your map

    });
}

您可能希望在上面介绍一些错误处理。

【讨论】：

当我像这样更改我的代码时，地图会中断并且不会再加载

【解决方案2】：

Alex T 的回答正确地获取了用户的位置，但在 getCurrentPosition() 回调中初始化地图并不是一个好习惯。如果地图已经在其他地方初始化，这将用新地图覆盖原始地图，在 Alex 的示例中，在代码的其他地方无法访问，因为 myVar 是回调中的局部变量。如果地图尚未初始化，则如果地理定位失败或被用户阻止，则根本不会加载。相反，最好先使用默认位置初始化地图，如果地理定位成功，然后将其平移到正确的位置：

var myMap = new L.Map('mapid', {
  maptype: 'dreamy',
  poi: true,
  traffic: true,
  center: [35.699739, 51.338097],
  zoom: 8
});

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    (position) => myMap.panTo([position.coords.latitude, position.coords.longitude]),
    (err) => console.warn(`Geolocation error (${err.code}): ${err.message}`),
    { timeout: 20000 } // Timeout in ms
  );
}

顺便说一句，当我测试我的答案时，我收到了奇怪的错误消息，直到我记得我安装了一个浏览器插件来隐藏我在网站上的位置。一旦我禁用它，它就可以正常工作。还要确保代码在安全上下文中运行（例如，在 https 上运行 - 有关更多详细信息，请参阅 Geolocation API documentation。

【讨论】：