地理位置:获取格式化地址

时间:2018-04-26 01:32:18

标签: javascript php geolocation google-geocoder google-geolocation

我一直在尝试使用地理位置获取格式化地址几天。

我有一个点击按钮,可以根据纬度和经度检测位置。该位置将使用标记显示在地图上。此外,当检测到位置时,格式化的地址将传递给输入字段文本。

这是观点:

This is the view

代码:

     <div class="container-fluid">
        <br>
        <div class="row">
            <div class="col-md-1">
                <button class="btn btn-primary" onclick="getLocation()">Get Location</button>
            </div>
            <div class="col-md-6">
                <input class="form-control" type="text" name="address" id="address" readonly>
            </div>
            <div class="col-md-offset-1 col-md-10">
                <div id="map"></div>
            </div>
        </div>
    </div>
    <script src="https://maps.google.com/maps/api/js?key=AIzaSyA0Sdb3JYcx1VzhCO8iY48ynAHN-a0jQes"></script>
    <script>
        document.getElementById("address").setAttribute('value',address);
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition, showError);
            } else { 
                alert('Geolocation is not supported by this browser');
            }
        }

        function showPosition(geocoder,position,infowindow) {
            var map = new google.maps.Map(document.getElementById('map'));
            var lat = position.coords.latitude;
            var lng = position.coords.longitude;
            var latlng = new google.maps.LatLng(lat, lng);
            if (status === google.maps.GeocoderStatus.OK) {
                if (results[1]) {
                  map.setZoom(11);
                  var marker = new google.maps.Marker({
                    position: latlng,
                    map: map
                });
                  infowindow.setContent(results[0].formatted_address);
                  infowindow.open(map, marker);
                  address.innerHTML=results[0].formatted_address;
              } else {
                  window.alert('No results found');
              }
          } else {
            window.alert('Geocoder failed due to: ' + status);
        }
    }

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

我似乎无法完成这项工作。请帮我。谢谢。

更新:

document.getElementById("address").setAttribute('value',address);
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        } else { 
            alert('Geolocation is not supported by this browser');
        }
    }

    function showPosition(position) {
        var lat = position.coords.latitude;
        var lng = position.coords.longitude;
        var latlng = new google.maps.LatLng(lat, lng);
        var map = new google.maps.Map(document.getElementById('map'));
        var geocoder = new google.maps.Geocoder;
        var infowindow = new google.maps.InfoWindow; 
        geocoder.geocode({ 'latLng': latlng }, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            if (results[1]) {
              map.setZoom(11);
              var marker = new google.maps.Marker({
                position: latlng,
                map: map
            });
              infowindow.setContent(results[0].formatted_address);
              infowindow.open(map, marker);
              address.innerHTML=results[0].formatted_address;
          } else {
              window.alert('No results found');
          }
      } else {
        window.alert('Geocoder failed due to: ' + status);
    }
});
    }

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

0 个答案:

没有答案