微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

javascript – 使用Cordova / Angular JS从用户位置获取地址

使用cordova-plugin-geoloaction插件我正在检索用户在其移动设备上的位置.我的onSuccess()函数返回纬度和经度,现在我想在应用程序中显示相应的地址:

<script type="text/javascript" charset="utf-8">

  // Wait for device API libraries to load
  //
  document.addEventListener("deviceready", onDeviceReady, false);

  // device APIs are available
  function onDeviceReady() {
    navigator.geolocation.getCurrentPosition(onSuccess, one rror);
  }

  // onSuccess Geolocation
  function onSuccess(position) {
    var element = document.getElementById('geolocation');
    element.innerHTML = 'Latitude: ' + position.coords.latitude              + '<br />' +
            'Longitude: '          + position.coords.longitude             + '<br />' +
            'Altitude: '           + position.coords.altitude              + '<br />' +
            'Accuracy: '           + position.coords.accuracy              + '<br />' +
            'Altitude Accuracy: '  + position.coords.altitudeAccuracy      + '<br />' +
            'heading: '            + position.coords.heading               + '<br />' +
            'Speed: '              + position.coords.speed                 + '<br />' +
            'Timestamp: '          + position.timestamp                    + '<br />';
  }

  // one rror Callback receives a PositionError object
  function one rror(error) {
    alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
  }

</script>

我找到了许多API(例如谷歌地图),它们提供纬度/经度转换的地址,但不是相反(纬度/经度来解决).

有什么好的网络服务可供我使用吗?

解决方法:

您可以使用Google Maps Geocoding service通过坐标解析地址(反向地理编码)

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 8,
        center: { lat: 40.731, lng: -73.997 }
    });
    var geocoder = new google.maps.Geocoder;
    var infowindow = new google.maps.InfoWindow;

    document.getElementById('submit').addEventListener('click', function () {
        geocodeLatLng(geocoder, map, infowindow);
    });
}

function geocodeLatLng(geocoder, map, infowindow) {
    var input = document.getElementById('latlng').value;
    var latlngStr = input.split(',', 2);
    var latlng = { lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1]) };
    geocoder.geocode({ 'location': latlng }, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            if (results[0]) {
                map.setZoom(11);
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map
                });
                infowindow.setContent(results[0].formatted_address);
                infowindow.open(map, marker);
            } else {
                window.alert('No results found');
            }
        } else {
            window.alert('Geocoder Failed due to: ' + status);
        }
    });
}

google.maps.event.addDomListener(window, 'load', initMap);
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#map {
    height: 100%;
}

#floating-panel {
    position: absolute;
    top: 10px;
    left: 25%;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
    text-align: center;
    font-family: 'Roboto','sans-serif';
    line-height: 30px;
    padding-left: 10px;
}
<script src="https://maps.google.com/maps/api/js"></script>
 <div id="floating-panel">
    <input id="latlng" type="text" value="40.714224,-73.961452">
    <input id="submit" type="button" value="Reverse Geocode">
</div>
<div id="map"></div>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐