使用谷歌地图获取纬度和经度json格式使用angularjs自动完成答案

【问题标题】：Get latitude and longitude json format using google maps auto complete using angularjs使用谷歌地图获取纬度和经度json格式使用angularjs自动完成
【发布时间】：2017-03-08 17:49:45
【问题描述】：

如何使用谷歌地图获取经纬度 json 格式，使用 angularjs 自动完成。

【问题讨论】：

你可能会在这里得到答案，gist.github.com/VictorBjelkholm/6687484

标签： angularjs json google-maps google-maps-api-3 spring-boot

【解决方案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]);
          });

        });
      }
    };
  }]);

【讨论】：

【解决方案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">

【讨论】：