使用angularjs过滤谷歌地图标记

时间:2013-10-16 19:26:37

标签: javascript google-maps angularjs

我正在使用angular-google-maps directive,当我尝试删除绑定到控制器的标记时,我遇到了问题。我尝试过各种版本的Angular,并尝试过angular-google-maps的master和r1-dev分支。

我不知道为什么,但它似乎陷入了$ digest函数,当我过滤掉列表项时,这不会发生。被抛出的异常是:

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

这里可以看到一个演示,我的代码从JavaScript的第550行开始。上面的行是angular-google-maps指令。

http://jsfiddle.net/ADukg/4127/

1 个答案:

答案 0 :(得分:6)

这对我有用,这是通过阅读angular-google-maps模块发布队列中的其他一些相关错误。

jist是你需要在手表中创建一个变量并使用它来传递给models参数。

基本JS:

controller('MainCtrl', function ($scope, $filter) {

   $scope.$watch("breweryFilter", function(breweryFilter){
      $scope.filteredMarkers = $filter("filter")($scope.breweries, breweryFilter);
      if (!$scope.filteredMarkers){
        return;
      }
   });
});

过滤输入:

<input name="brewery-filter" class="form-control" type="search" ng-model="breweryFilter" placeholder="filter locations" />

包含markers指令的Map指令:

   <google-map
        center="map.center"
        zoom="map.zoom"
        draggable="true"
        control="map.control">

      <window
          show="breweryInfoWindow.showWindow"
          coords="breweryInfoWindow.coords"
          isIconVisibleOnClick="true"
          options="breweryInfoWindow.options"
          templateUrl="breweryInfoWindow.templateUrl"
          templateParameter="breweryInfoWindow.templateParams"
          data-ng-cloak>
        _
      </window>

      <markers
          models="filteredMarkers"
          idKey="'nid'"
          coords="'self'"
          icon="'icon'"
          doRebuildAll="true"
          fit='true'
          doCluster='true'
          control="map.markersControl"
          click="'onMarkerClicked'">
      </markers>

    </google-map>

希望这对你有所帮助。