Получить формат широты и долготы json с использованием карт google auto complete с помощью angularjs

Question

Как получить Получить формат широты и долготы json с использованием карт google auto complete с помощью angularjs.

Answer 1

Я нашел решение!

app.directive('googleplace', [function(){ 
    return { 
     restrict: 'EA', 
     require: 'ngModel', 
     replace: true, 
     scope: { 
     ngModel: '=', 
     place: '=?' 

     }, 
     link: function(scope, element, attrs, model){ 
     google.maps.places.autocomplete(element[0], options); 
     var options = { 
      types: ['(geocode)'], 
      componentRestrictions: {} 
     }; 

     scope.googleplace = new google.maps.places.Autocomplete(element[0], options); 

     goole.maps.event.addListner(scope.googleplace, 'place_changed', function(){ 
      var geoComponents = scope.googleplace.getPlace(); 
      var latitude = geoComponents.geometry.location.lat(); 
      var longitude = geoComponents.geometry.location.lng(); 

      var addressComponents = geoComponents.address_components; 

      addressComponents = addressComponents.filter(function(component){ 
      switch (component.types[0]) { 
       case "locality": // cities 
       return true; 
       case "administrative_area_level1": //state 
       return true; 
       case "postal_code": // postal code 
       return true; 
       case "country": // country 
       return true; 
       default: 
       return false; 

      } 
      }).map(function(obj) { 
       return obj.long_name; 
      }); 

      addressComponents.push(latitude, longitude); 

      scope.$apply(function(){ 
      scope.details = addressComponents; //array containing each location component 
      mode.$setViewValue(element.val()); 
      }); 

      scope.$on('$destroy', funcion(){ 
      google.maps.event.clearInstanceListerners(element[0]); 
      }); 

     }); 
     } 
    }; 
    }]); 

Answer 2

Добавьте ниже сценарий и функцию в свои HTML-файлы, или вы можете перенести функцию на сам JS, который будет более чистым.

<script type="text/javascript"> 
    function init() { 
    var places = new google.maps.places.Autocomplete(document.getElementById('input')); 

    google.maps.event.addListener(places, 'place_changed', function() { 
     var place = places.getPlace(); 
     var address = place.formatted_address; 
     var latitude = place.geometry.location.lat(); 
     var longitude = place.geometry.location.lng(); 
     var mesg = "Address: " + address; 
     mesg += "\nLatitude: " + latitude; 
     mesg += "\nLongitude: " + longitude; 
     alert(mesg); //will alert after selection... 
    }); 
    } 
    google.maps.event.addDomListener(window, 'load', init); 
</script> 

В вашем HTML

<input type="text" id="input" ng-model="result" data-tap-disabled="true" placeholder="Enter an location" data-search="input">