Leafletjs 显示我的位置标记而不是硬编码的位置

Posted 2023-02-23

【中文标题】Leafletjs 显示我的位置标记而不是硬编码的位置

【英文标题】：Leafletjs show my location marker instead of hardcoded location

【发布时间】：2019-08-03 21:39:54

【问题描述】：

我正在试用 Leaflet.js，我有一张带有这样标记的地图：

var marker = new L.marker([5.897818, -1.120009],
    draggable: true,
    autoPan: true
).addTo(mymap);

这显示正常，但我希望它出现在我当前的位置，而不是上面的硬编码位置。

我该怎么做？

【参考方案1】：

您需要点击Geolocation API 并使用其结果来创建标记。

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

navigator.geolocation.getCurrentPosition(position => 
  const  coords:  latitude, longitude  = position;
  var marker = new L.marker([latitude, longitude], 
    draggable: true,
    autoPan: true
  ).addTo(mymap);

  console.log(marker);
)

将 API 与 *** 结合使用会出现一些问题，因此这里有一个指向有效的 JSFiddle 的链接。

【讨论】：

它要求我获得地理位置的许可，但标记没有出现..当您在本地浏览器上打开计算机上的 html 页面时它不起作用吗？

啊，好吧，我明白了。我前一段时间做了这个，所以里面有一个嵌入式 API 密钥。如果您转到MapBox，您可以创建自己的 API 密钥。得到一个后，只需更新脚本中设置切片图层的部分，并用您自己的密钥替换access_token 之后的所有内容。

好的，我创建了一个帐户并更改了访问令牌，但仍然没有出现指针。我正在使用 chrome 并通过双击桌面上的文件打开 html 文件。我是否需要在线托管此页面才能显示地理位置标记？

我会在getCurrentPosition 的回调中添加一些日志记录，以验证它是否正在获取位置信息。另外，您能否让它在 JSFiddle 或某些托管环境中工作？

控制台日志没有返回任何内容： navigator.geolocation.getCurrentPosition(position => const coords: latitude, longitude = position; var marker = new L.marker([latitude, longitude], draggable: true, autoPan: true ).addTo(mymap); console.log($latitude-$longitude); console.log(marker); )