时间戳

首页 > 解决方案 > 如何使用 Mapbox 通过弹出框获取当前位置

javascript - 如何使用 Mapbox 通过弹出框获取当前位置

问题描述

是否可以使用 mapbox 像 vanilla javascript 获取当前位置（纬度和经度）？我想要的是第一张图片，但我认为使用香草 javascript 位置会使位置不准确，我想使用地图框，但它只提供使用必须首先显示地图的按钮。

图片一，使用香草javascript获取纬度和经度

图片二，使用mapbox，但用户必须先点击按钮

所以，我想要的是如何在页面加载时或当用户单击按钮而不在 mapbox 上显示地图时获取用户当前位置（纬度和经度）。

标签： javascriptgeolocationlocationmapboxmapbox-gl-js

解决方案

您引用的 Mapbox 示例使用Mapbox 的 GeoLocate Control，它反过来利用浏览器Geolocation API来确定当前位置。

因此，如果您不想在 Mapbox 地图上显示返回的位置，则使用 Mapbox 的地理定位控件没有任何优势。

示例如何在 HTML 页面中获取地理位置：

<script>
var x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}
</script>

推荐阅读