javascript - 自定义弹出窗口以获取我的当前位置

Question

我当前的站点完全取决于当前位置。现在我正在使用地理定位来获取当前位置。但在当前情况下，用户对共享位置感到困惑。因此，我想创建一个自定义弹出窗口( Bootstrap )来获取客户端 PC 的当前位置。

我当前的代码如下:

function getLocation() {

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, error, {enableHighAccuracy:true,timeout:60000,maximumAge:0});
    }
    else {
        console.log("Geolocation is not supported by this browser.");
    }
}

function error(error) {
    console.log(error);
}

function showPosition(position) {

    var latitude = position.coords.latitude,
    longitude = position.coords.longitude;

    console.log(latitude);
    console.log(longitude);
}

请帮助我解决这个问题。

Answer 1

现在有办法绕过浏览器的地理位置权限弹出窗口。在 Chrome 上，它看起来像这样:

用户需要单击“允许”，然后您才能读取他们的位置(这是一项安全功能)。但是，如果您确实需要它，您可以检测权限是否被拒绝，并向用户解释如何授予权限以及为什么它很重要。

参见this answer类似的问题和this example检测“权限被拒绝”错误:

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, positionError);
  } else {
    console.log("Geolocation is not supported by this browser.");
  }
}

function showPosition(position) {
  // Success, can use position.
  console.log("Your position is: " + position);
}

function positionError(error) {
  if (error.PERMISSION_DENIED) {
    console.log("Error: permission denied");
    // Your custom modal here.
    showError('Geolocation is not enabled. Please enable to use this feature.');
  } else {
    // Handle other kinds of errors.
    console.log("Other kind of error: " + error);
  }
}

function showError(message) {
  // TODO
}

getLocation();