javascript - 陷入地理位置和反向地理位置

Question

我想创建一个用户输入 Pincode/zipcode 的页面，并且我想在其中显示四个只读输入 1) 州名 2) 城市名 3) 经度 4) 纬度

另外我需要知道是否有任何开源或免费的替代谷歌地理定位 Api。

谢谢..

目前，我可以借助 PIN 码获取纬度和经度。这是我的代码：

<script type="text/javascript">
  var x = document.getElementById("demo");

  function pinLocn() {
    var geocoder = new google.maps.Geocoder();
    var address = document.getElementById("txtAddress").value;
    geocoder.geocode({
      'address': address
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        var latitude = results[0].geometry.location.lat();
        var longitude = results[0].geometry.location.lng();
        document.getElementById('LATTI').value = latitude;
        document.getElementById('LONGI').value = longitude;
        // alert(longitude + " " + latitude);
        var lat = latitude;
        var lon = longitude;
        var latlon = new google.maps.LatLng(lat, lon)
        var mapholder = document.getElementById('mapholder')
        // mapholder.style.height = '250px';
        // mapholder.style.width = '500px';

        var myOptions = {
          center: latlon,
          zoom: 14,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          mapTypeControl: false,
          navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
          }
        }

        var map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
        var marker = new google.maps.Marker({
          position: latlon,
          map: map,
          title: "You are here!"
        });
      } else {
        alert("Request failed.")
      }
    });
  };

  function getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
      x.innerHTML = "Geolocation is not supported by this browser.";
    }
  }

  function showPosition(position) {
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    var latlon = new google.maps.LatLng(lat, lon)
    var mapholder = document.getElementById('mapholder')
    // mapholder.style.height = '250px';
    // mapholder.style.width = '500px';

    var myOptions = {
      center: latlon,
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      navigationControlOptions: {
        style: google.maps.NavigationControlStyle.SMALL
      }
    }

    var map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
    var marker = new google.maps.Marker({
      position: latlon,
      map: map,
      title: "You are here!"
    });
  }

  function showError(error) {
    switch (error.code) {
      case error.PERMISSION_DENIED:
        x.innerHTML = "User denied the request for Geolocation."
        break;
      case error.POSITION_UNAVAILABLE:
        x.innerHTML = "Location information is unavailable."
        break;
      case error.TIMEOUT:
        x.innerHTML = "The request to get user location timed out."
        break;
      case error.UNKNOWN_ERROR:
        x.innerHTML = "An unknown error occurred."
        break;
    }
  }
</script>

标签： javascriptgeolocationlocationleafletlatitude-longitude