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中，我创建了Map和标记，如下所示：

    $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()
      }
};

我不确定用于弹出infowindows的标记方法，但它为您提供了使用标记

希望它有所帮助！

Angular UI-Google-Map打开infoWindow

1 个答案: