2015-12-19 11 views
5

cordova-plugin-geoloactionプラグインを使用して、モバイルデバイス上のユーザーの位置を取得しています。私onSuccess()機能は緯度と経度を返し、今私はアプリで対応するアドレスを表示したいと思います:私は/経度の変換を緯度するアドレスを提供するAPI(例えばGoogleマップ)をたくさん見つけ Cordova/Angular JSを使用してユーザーの場所からアドレスを取得

<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, onError); 
    } 

    // 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 />'; 
    } 

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

</script> 

が、他の方法では(緯度/経度に対処する)。

私はそれに使用できる良いwebserviceはありますか?

答えて

5

あなたは

例(ジオコーディング逆)座標によってアドレスを解決するため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>

関連する問題