Angular google地方自动完成无法正常工作

时间:2016-08-11 09:21:02

标签: angularjs autocomplete google-places

我在我的项目中使用了谷歌自动完成功能,它在本地工作正常,但没有在服务器上工作, 这是我的代码

app.js

angular.module('MaterialApp', [
'ui.router', 'ngAnimate', 'ngMaterial',
'ngSanitize', 'ui.sortable', 'base64',
'angular-md5', 'blockUI', 'oc.lazyLoad',
'ngMdIcons', 'md.data.table', 'highcharts-ng',
'google.places', 'ui.calendar', 'ui.date',
'easypiechart', 'ngFileUpload', 'ngCookies',
"isoCurrency", "ngBootstrap", "datatables", "authService", "companyService" // "templatescache"])

form.html

<div class="form-group group-pro">
                    <div class="group-row col-sm-10 col-sm-push-1"> 
                        <input class="form-control control-set" ng-model="campaign.location_data" name="location_data" type="text" g-places-autocomplete  id="location_data" placeholder="Enter the location you want to target" force-selection="true" autocomplete="on" required=""/>
                        <div ng-show="createCampaignForm.$submitted || createCampaignForm.location_data.$touched" ng-model="createCampaignForm.location_data">
                            <span ng-show="createCampaignForm.location_data.$error.required" class="text-danger">Please enter location data.</span>
                        </div>
                    </div>
                </div>

my controller.js

$scope.$on('g-places-autocomplete:select', function (event, place) {
            console.log(event);
            console.log(place);
            var componentForm = {
                locality: 'city', //city
                administrative_area_level_1: 'region', //state
                country: 'country' //country
            }, place_selection_val = [];
            for (var cFKey in componentForm) {
                $scope.campaign[componentForm[cFKey]] = null;
            }
            for (var i = 0; i < place.address_components.length; i++) {
                var addressType = place.address_components[i].types[0];
                if (componentForm[addressType]) {
                    var val = place.address_components[i].short_name;
                    place_selection_val.push(val);
                    $scope.campaign[componentForm[addressType]] = val;
                }
            }
            $scope.campaign.location_data = place_selection_val.join(', ').replace(/^\s+|\s+$/g, '');
        });

请帮助我,为什么它不在服务器上工作。

2 个答案:

答案 0 :(得分:3)

angular.module('MyTouchModule', ['ui.router', 'ngMaterial', 'ngMessages'])

.config(function( $mdGestureProvider ) {
    $mdGestureProvider.skipClickHijack();
})

嗨这对我帮助很大。 用Google搜索相当长的时间。 问题在于角度材料和自动完成事件处理(监听器)之间的冲突。 这应该有所帮助。

答案 1 :(得分:0)

如果您使用的是API密钥,请务必在console.developers.google.com

启用Google Places API网络服务

您是否收到了可以在开发者控制台中显示的任何错误?

我假设你包括

   <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>

此外,我会检查脚本文件发布到服务器后的文件路径