設置locationpicker.jquery.js的當前用戶位置

Question

我正在使用locationpicker.jquery.js並嘗試在加載之前提供經度和緯度的變量，以便用戶可以從他或她的特定位置加載。

  $('.map').locationpicker({
      location: {
          latitude: 10.621760,
          longitude: 121.107015
      },
      radius: 10,
      inputBinding: {
          latitudeInput: $('.map-lat'),
          longitudeInput: $('.map-lon'),
          radiusInput: $('.map-radius'),
          locationNameInput: $('.map-address'),
          scrollwheel: true
      },
      enableReverseGeocode: true
  });

  $( document ).ready(function() {
      navigator.geolocation.getCurrentPosition(showPosition);
      function showPosition(position) {
          $('.map-lat').val(position.coords.latitude);
          $('.map-lon').val(position.coords.longitude);
      }
  });

我已經嘗試將jquery選擇器放入緯度和經度的變量中。 我試過設置一個隱藏的輸入字段並將它們傳遞給緯度和經度; 但他們只是失敗了。 我可以做些什么來使locationpicker加載到用戶的位置？ 緯度和經度似乎不接受除數字之外的任何其他類型的變量。

Answer 1

我認為你遇到的問題是getCurrentLocation是一個異步進程。 這意味着您需要在該過程完成后加載地圖。

$( document ).ready(function() {
  navigator.geolocation.getCurrentPosition(showPosition);
  function showPosition(position) {
      var lat = position.coords.latitude;
      var lng = position.coords.longitude;
      $('.map-lat').val(lat);
      $('.map-lon').val(lng);
      buildMap(lat, lng);
  }
});

lat和lng參數並將它們轉換為浮點數（ +lat ...），否則使用默認值。

function buildMap(lat, lng) {
  $('.map').locationpicker({
    location: {
      latitude: +lat || 10.621760,
      longitude: +lng || 121.107015
    },
    radius: 10,
    ...
}

Answer 2

現在， getCurrentPosition()和watchPosition()不再適用於不安全的起源。 要使用此功能，您應該考慮將應用程序切換到安全源，例如HTTPS 。