angularjs谷歌地图$ location.search在自动完成place_change后不会改变

时间:2014-08-26 23:11:54

标签: angularjs google-maps autocomplete location

初始请求网址为http://localhost/#/map?lat=33.73060000952102&lng=-117.12635126323244 在我的项目中,我正在使用谷歌地图自动完成服务,该服务使用地址预测自动填充文本字段,并在选择地址时,地图以该位置为中心。我的place_changed事件监听器被成功触发,我的控制器setLocation函数被成功调用。但是,地址栏中的URL未使用新的lat和lng参数值更新。

如果我从html中的ng-click调用$ scope.getProjectsByCenter()它可以工作。不知何故,place_changed中的事件链与$ location.search冲突。

任何人都有任何想法为什么?

angular:app.js

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

app.controller('MainMapController', function($scope,$location){

   $scope.setLocation = function(lat,lng){
      $location.search('lat',lat);
      $location.search('lng',lng);
      console.log($location.search()); //This logs an object with the new lat and lng
   };

   $scope.getProjectsByCenter = function(){
      var center = getProjectsByCenter();
      $scope.setLocation(center.lat(),center.lng());
   };

});

vanilla:map.js

function initializeMap() {
   var map = new google.maps.Map(document.getElementById("map-canvas"), {
      center: {lat: 33.868670, lng: -117.796783}
   });
   var input = document.getElementById('place-search');
   var autocomplete = new google.maps.places.Autocomplete(input);

   autocomplete.addListener('place_changed', function() {
      var place = autocomplete.getPlace();
      if (!place.geometry) {
         return;
      }
      var lat = place.geometry.location.lat();
      var lng = place.geometry.location.lng();

      angular.element('#MainMapController').scope().setLocation(lat,lng);

   };
};

1 个答案:

答案 0 :(得分:1)

找到答案。 $申请()

我的setLocation现在看起来像这样:

$scope.setLocation = function(lat,lng){
   $location.search('lat',lat);
   $location.search('lng',lng);
   $scope.$apply();
};

这篇好文章:http://jimhoskins.com/2012/12/17/angularjs-and-apply.html