Геокодирование с использованием angularjs

Question

Я новичок в угловых js. Как я могу реализовать службы геокодирования? В частности, когда я заполняю полный адрес, как я могу заполнить остальные поля (postal code,city,country,lat and lng) автоматически?

Я хочу достичь чего-то вроде this page в угловом.
Пожалуйста, помогите мне.

У меня есть код, чтобы заполнить полный адрес:

app.directive('googlePlaces', function(){ 
    return { 
     restrict:'E', 
     replace:true, 
     // transclude:true, 
     scope: {location:'='}, 
     template: '<input type="text" id="fulladdress" name="fulladdress" ng-model="enterprise.fulladdress" class="form-control text-field" placeholder="">', 
     link: function($scope, elm, attrs){ 
      var autocomplete = new google.maps.places.Autocomplete($("#country")[0], {}); 
      google.maps.event.addListener(autocomplete, 'place_changed', function() { 
       var place = autocomplete.getPlace(); 
       $scope.location = place.geometry.location.lat() + ',' + place.geometry.location.lng(); 
       $scope.$apply(); 
      }); 
     } 
    } 
}); 

и HTML:

<div class="form-group enterprise-form"> 
    <label>Full Address</label> 
    <google-places location=location></google-places> 
</div> 

Я хочу, чтобы заполнить еще два или три поля lat,lng, postal code. Могу ли я продлить мою директиву для достижения этого, и если да, то как?

Answer 1

Вы можете просто следовать за example.

автозаполнения слушатель 'place_change' происходит за пределами углового в $ переваривать петлю, так что вы должны вызвать fillInAddress с помощью $evalAsync или вы не будете видеть ваши изменения формы до следующего дайджеста.

Широта, долгота хранится на объекте place в geometry.location.

var app = angular.module('app', []); 
 

 
app.controller('myController', function($scope) { 
 
    var components = { 
 
    street_number: 'short_name', 
 
    route: 'long_name', 
 
    locality: 'long_name', 
 
    administrative_area_level_1: 'short_name', 
 
    country: 'long_name', 
 
    postal_code: 'short_name' 
 
    }; 
 
    var autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), { 
 
    types: ['geocode'] 
 
    }); 
 
    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
 
    $scope.$evalAsync(fillInAddress); 
 
    }); 
 
    
 
    $scope.formData = {}; 
 
    $scope.ll = {}; 
 

 
    function fillInAddress() { 
 
    var place = autocomplete.getPlace(); 
 
    Object.keys(components).forEach(function(component) { 
 
     $scope.formData[component] = ''; 
 
     document.getElementById(component).disabled = false; 
 
    }); 
 
    
 
    place.address_components.forEach(function(component) { 
 
     var addressType = component.types[0]; 
 
     if (components[addressType]) { 
 
     $scope.formData[addressType] = component[components[addressType]]; 
 
     } 
 
    }); 
 
    $scope.ll = { 
 
     lat: place.geometry.location.G, 
 
     lon: place.geometry.location.K 
 
    }; 
 
    } 
 
});

#locationField, 
 
#controls { 
 
    position: relative; 
 
    width: 480px; 
 
} 
 
#autocomplete { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 99%; 
 
} 
 
.label { 
 
    text-align: right; 
 
    font-weight: bold; 
 
    width: 100px; 
 
    color: #303030; 
 
} 
 
#address { 
 
    border: 1px solid #000090; 
 
    background-color: #f0f0ff; 
 
    width: 480px; 
 
    padding-right: 2px; 
 
} 
 
#address td { 
 
    font-size: 10pt; 
 
} 
 
.field { 
 
    width: 99%; 
 
} 
 
.slimField { 
 
    width: 80px; 
 
} 
 
.wideField { 
 
    width: 200px; 
 
} 
 
#locationField { 
 
    height: 20px; 
 
    margin-bottom: 2px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script> 
 

 
<div ng-app='app' ng-controller='myController'> 
 
    <div id="locationField"> 
 
    <input id="autocomplete" placeholder="Enter your address" type="text"> 
 
    </div> 
 
    <table id="address"> 
 
    <tr> 
 
     <td class="label">Street address</td> 
 
     <td class="slimField"> 
 
     <input ng-model="formData.street_number" class="field" id="street_number" disabled="true" type="text"> 
 
     </td> 
 
     <td class="wideField" colspan="2"> 
 
     <input ng-model="formData.route" class="field" id="route" disabled="true"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="label">City</td> 
 
     <td class="wideField" colspan="3"> 
 
     <input ng-model="formData.locality" class="field" id="locality" disabled="true"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="label">State</td> 
 
     <td class="slimField"> 
 
     <input ng-model="formData.administrative_area_level_1" class="field" id="administrative_area_level_1" disabled="true"> 
 
     </td> 
 
     <td class="label">Zip code</td> 
 
     <td class="wideField"> 
 
     <input ng-model="formData.postal_code" class="field" id="postal_code" disabled="true"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="label">Country</td> 
 
     <td class="wideField" colspan="3"> 
 
     <input ng-model="formData.country" class="field" id="country" disabled="true"> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
    <pre>{{ formData | json }}</pre> 
 
    <pre>{{ ll | json }}</pre> 
 
</div>