Angular UI-Google-Map 打开 infoWindow

Question

我正在使用Angular-Google-maps 创建一个带有标记的地图。我可以单击标记并显示相关的 infoWindow。但是我希望能够单击链接列表以打开信息窗口，而不是单击标记本身，类似于此示例 here:

我之前问过这个问题，有人建议在我的<ui-gmap-windows> 标签中添加一个模型属性，但是当我查看 Angular-Google-Maps 文档时，我没有看到任何示例那个。

我的 html 看起来像这样：

<div id="googleMap" class="col-xs-12 col-md-8">
  <ui-gmap-google-map center='map.center' zoom='map.zoom'>
    <ui-gmap-markers models="markers"  coords="'coords'" icon="'icon'" click="onClick()" events="markersEvents" options="'options'">
      <ui-gmap-windows  show="show" closeClick="closeClick()" class="mapWindow"  >
        <div ng-non-bindable>{{id}} {{icon}} id="infoWindow"
          <h1>{{name}}</h1>
          <a href="#/detail/{{id}}" class="thumb">Show Detail</a>
        </div>
      </ui-gmap-windows>
    </ui-gmap-markers>
  </ui-gmap-google-map>
</div>
<div id="detail" class="col-xs-12 col-md-4">
  <ul>
    <li data-ng-repeat="x in markers">
      <a ng-click="onClick()">{{x.name}}</a> <!-- Click on this linnk and find associated infoWindow to open -->
    </li>
  </ul>
</div>

在我的 javascript 中，我正在创建地图和标记，如下所示：

    $scope.markers = [];

    $http.get("json/locations.json").success(function(response) {
      $scope.locations = response.dogFriendly;
      jQuery.each($scope.locations, function(i, val){
        console.log(i);
        console.log(val.location);
        var marker = {};
        marker.name = val.name;
        marker.id = i;
        marker.coords = val.location;
        marker.icon = '/images/pawIcon.png';
        marker.onClick = function(){
          $scope.windowOptions.visible = !$scope.windowOptions.visible;
        }.bind(this);
        $scope.markers.push(marker);

      });
    });

    $scope.windowOptions = {
      visible: false
    };

    $scope.onClick = function() {
      $scope.windowOptions.visible = !$scope.windowOptions.visible;
    };

    $scope.closeClick = function() {
      $scope.windowOptions.visible = false;
    };

    $scope.title = "Window Title!";

    uiGmapGoogleMapApi.then(function(maps){
      $scope.googleMap = {};
      $scope.map = { center: { latitude: 53.347117, longitude: -6.280285 }, zoom: 14 };

    });

    uiGmapIsReady.promise()
      .then(function(instances){
        var maps = instances[0].map;
        $scope.myOnceOnlyFunction(maps);
      });

    $scope.myOnceOnlyFunction = function (maps) {
      var center = maps.getCenter();
      var lat = center.lat();
      var lng = center.lng();
    };

    $scope.showMarker = function(obj, $event){
      var markerId = this.x.id;
      for(var i = 0; i < $scope.markers.length; i++){
        if(markerId == $scope.markers[i].id){

          // open this markers infoWindow
          $scope.markers[i].onClick = function(){
               $scope.windowOptions.visible = !$scope.windowOptions.visible;
          }
        }
      }
    }

  });

我试图弄清楚如何通过单击链接找到 marker.id，然后触发 WindowOptions 以打开该标记？

任何帮助将不胜感激。

Answer 1

你不能做类似的事情

<div id="detail" class="col-xs-12 col-md-4">
  <ul>
    <li data-ng-repeat="x in markers">
      <a ng-click="onClick($this)">{{x.name}}</a> 
    </li>
  </ul>
</div>

$scope.onClick = function(marker) {
      if(!marker.visible){
         marker.visible()
      }
};

我不确定弹出信息窗口的标记方法，但它为您提供了可以使用的标记

希望对你有帮助！