1

私が取り組んでいるプロジェクトで HTML5 ジオロケーションを利用しようとしています。

地理位置情報を介して、ユーザーの現在地の緯度と経度を取得するのは非常に簡単に思えます。

問題は、これを英国の郵便番号に変換する必要があり、javascript を学ぼうとして苦労していることです。

私が働いているコードは次のとおりです。

if (navigator.geolocation) {
  var timeoutVal = 10 * 1000 * 1000;
  navigator.geolocation.getCurrentPosition(
    displayPosition, 
    displayError,
    { enableHighAccuracy: true, timeout: timeoutVal, maximumAge: 0 }
  );
}
else {
  alert("Geolocation is not supported by this browser");
}

function displayPosition(position) {
  alert("Latitude: " + position.coords.latitude + ", Longitude: " + position.coords.longitude);
    var Lat = position.coords.latitude;
    var Long = position.coords.longitude;
    var inputField = document.getElementById("addressInput");
    inputField.value = Lat + Long;
}

function displayError(error) {
  var errors = { 
    1: 'Permission denied',
    2: 'Position unavailable',
    3: 'Request timeout'
  };
  alert("Error: " + errors[error.code]);
}

私が達成したいことを正確に行うこのサイトを見つけました： http://www.latlong.net/Show-Latitude-Longitude.html

これを機能させる方法について誰かが私にいくつかのヒントを教えてもらえますか?

どんなアドバイスも素晴らしいでしょう

前もって感謝します

========================= 修正コード:

        //var long = '50.**************', lat = '0.**************'
        var Lat='';
        var Long='';
        var coordsObj = {coords:{latitude:Lat, longitude:Long}};

        if (navigator.geolocation) {
          var timeoutVal = 10 * 1000 * 1000;
          navigator.geolocation.getCurrentPosition(
            displayPosition, 
            displayError,
            { enableHighAccuracy: true, timeout: timeoutVal, maximumAge: 0 }
          );
        }
        else {
          alert("Geolocation is not supported by this browser");
        }

        function displayPosition(position) {
            console.log(position, position.coords)
            console.log("Latitude: " + position.coords.latitude + ", Longitude: " + position.coords.longitude);
            var Lat = position.coords.latitude;
            alert(Lat);
            var Long = position.coords.longitude;
            alert(Long);
            var inputField = document.getElementById("addressInput");
            inputField.value = Lat + Long;
            return [Lat, Long];
        }           

        function displayError(error) {
          var errors = { 
            1: 'Permission denied',
            2: 'Position unavailable',
            3: 'Request timeout'
          };
          alert("Error: " + errors[error.code]);
        }

        function reverseGeoLookup(lon, lat) {
          var req = new XMLHttpRequest()
          req.open("GET", "http://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+","+lon+"&sensor=true", true)
          req.onreadystatechange = function() {
              if(req.readyState == 4) {
                  var result = JSON.parse(req.response).results
                  for(var i = 0, length = result.length; i < length; i++) {
                      for(var j = 0; j < result[i].address_components.length; j++) {
                          var component = result[i].address_components[j]
                          if(~component.types.indexOf("postal_code")) {
                            var out = document.getElementById('output')
                            out.innerHTML += component.long_name
                          }
                      }
                  }
              }
          }
          req.send()
        }

        var latlng = displayPosition(coordsObj)
        reverseGeoLookup.apply(this, latlng)
4

3 に答える 3

6

現在、ここにリストされている他のオプションに代わる無料の英国政府の選択肢があります. API と例の詳細については、http://postcodes.io/にアクセスしてください。また、あなたが求めている逆引きもサポートしています

于 2014-03-20T13:48:17.673 に答える
4

Google マップのリバース ジオコーディング APIを使用できます。これにより、緯度と経度のペアを一連の住所にマッピングできます。例えば：

function reverseGeoLookup(lon, lat) {
  //make a ajax request -- in prod just use whatever libraryyou have to provide this
  //probably jquery's $.get
  var req = new XMLHttpRequest()
  //put the longitude and latitude into the API query
  req.open("GET", "http://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+","+lon+"&sensor=true", true)
  //this is just the result callback -- it's the function arg to $.get, essentially
  req.onreadystatechange = function() {
      if(req.readyState == 4) {
          //again jquery will parse for you, but we want the results field
          var result = JSON.parse(req.response).results
          //the maps API returns a list of increasingly general results
          //i.e. street, suburb, town, city, region, country
          for(var i = 0, length = result.length; i < length; i++) {
              //each result has an address with multiple parts (it's all in the reference)
              for(var j = 0; j < result[i].address_components.length; j++) {
                  var component = result[i].address_components[j]
                  //if the address component has postal code then write it out
                  if(~component.types.indexOf("postal_code")) {
                    var out = document.getElementById('output')
                    out.innerHTML += component.long_name
                  }
              }
          }
      }
  }
  //dispatch the XHR... just use jquery
  req.send()
}

この例を js フィドルにも入れました。

お役に立てれば。

于 2013-05-24T00:28:29.330 に答える
0

html5 ジオロケーションから英国の郵便番号を取得するという質問に完全に答えるために、キーランのフィドルにいくつかの変更を加えました。

var x=document.getElementById("output");
getLocation();

function getLocation()
  {
  if (navigator.geolocation)
    {
       navigator.geolocation.watchPosition(reverseGeoLookup);
    }
  else
    {
       x.innerHTML="Geolocation is not supported by this browser.";
    }
  }

function reverseGeoLookup(position) {
    console.log(position);
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
  var req = new XMLHttpRequest()
  req.open("GET", "http://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+","+lon+"&sensor=true", true)
  req.onreadystatechange = function() {
      if(req.readyState == 4) {
          var result = JSON.parse(req.response).results
          for(var i = 0, length = result.length; i < length; i++) {
              for(var j = 0; j < result[i].address_components.length; j++) {
                  var component = result[i].address_components[j]
                  //console.log(component.long_name);
                  if(~component.types.indexOf("postal_code")) {
                    var out = document.getElementById('output');
                    out.innerHTML = 'Approximate Post Code for your location is ' + component.long_name;
                    return false;
                  }
              }
          }
      }
  }
  req.send()
}

http://jsfiddle.net/ef72Q/28/

于 2013-10-11T14:07:49.520 に答える