过滤谷歌地图与angularjs标记 [英] Filtering google maps markers with angularjs

问题描述

我使用href=\"https://github.com/nlaplante/angular-google-maps\" rel=\"nofollow\">角谷歌 - 地图指示的

I'm using the angular-google-maps directive and I'm running into an issue when I try to remove markers that are bound to the controller. I've tried various versions of Angular, and have tried the master and r1-dev branch of angular-google-maps.

我不知道为什么，但它出现在$消化功能将被逮住了，当我筛选出列表项不会发生这种情况。获取引发的异常是这样的：

I don't know why, but it appears to be getting caught up in the $digest function, and this does not happen when I filter out list items. The exception that gets thrown is this:

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

一个演示可以看到这里，我的code开始在JavaScript的550线。上面的线是角谷歌 - 地图指示。

A demo can be seen here, my code starts at line 550 of the JavaScript. The lines above are the angular-google-maps directive.

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

推荐答案

下面是我工作，这是从角谷歌，地图模块问题队列中读取其他一些相关的错误。

Here is what worked for me, this is from reading some other related bugs in the angular-google-maps module issue queue.

该JIST是你需要创建一个表内的变量，并用它来传递给模型的参数。

The jist is you need to create a variable inside a watch and use that to pass to the models parameter.

基本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" />

标记包含指令地图指令：

Map directive containing markers directive:

   <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>

希望这是对你有帮助。

Hope this is helpful for you.

这篇关于过滤谷歌地图与angularjs标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！