我有这个地方自动完成位置,但我怎么能用纬度和经度来存储它

时间:2015-09-14 07:33:39

标签: angularjs material-design

我试图通过使用地方自动完成来获得一个位置的lat和long。我有位置,但我也需要存储纬度和长信息。这是我试过的代码

pstmt.executeUpdate();

Angular js Script

 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <div>Google Places Autocomplte integration in Angular</div>
    <div>To Test, start typing the name of any Indian city</div>
    <div>selection is: {{chosenPlace}}</div>
    <div><input ng-model="chosenPlace" googleplace/></div>
</div>

这是JSFiddle链接:http://jsfiddle.net/mwDQr/1/

1 个答案:

答案 0 :(得分:0)

检查此代码的link和扩展版

angular.module('app').directive('googleplace', [ function() {
return {
    require: 'ngModel',
    scope: {
        ngModel: '=',
        details: '=?'
    },
    link: function(scope, element, attrs, model) {
        var options = {
            types: ['(cities)'],
            componentRestrictions: {}
        };

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

        google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
            var geoComponents = scope.gPlace.getPlace();
            var latitude = geoComponents.geometry.location.A;
            var longitude = geoComponents.geometry.location.F
            var addressComponents = geoComponents.address_components;

            addressComponents = addressComponents.filter(function(component){
                switch (component.types[0]) {
                    case "locality": // city
                        return true;
                    case "administrative_area_level_1": // state
                        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
                model.$setViewValue(element.val());
            });
        });
    }
};
}]);