angularjs - ng-Map 未在信息窗口中显示文本

Question

我有以下代码:

<ng-map>
        <marker ng-repeat="item in items" position="{{item[4]}},{{item[5]}}" name="{{item[1]}}" on-click="showInfoWindow('myInfoWindow')">
          <info-window id="myInfoWindow">
              <h4>{{this.name}}</h4>
          </info-window>
        </marker>
</ng-map> 

问题是我看到信息窗口，但 h4 内的文本为空，而不是 {{item[1]}} 的内容

Answer 1

info-window 指令不得与 ng-repeat 一起使用，以下示例演示如何为标记初始化信息窗口的单个实例:

angular.module('ngMap').controller('MyCtrl', function($scope,NgMap) {
  
  NgMap.getMap().then(function(map) {
    $scope.map = map;
  });
  $scope.cities = [
    {id: 1,name: 'Oslo', pos:[59.923043, 10.752839]},
    {id: 2,name: 'Stockholm',pos:[59.339025, 18.065818]},
    {id: 3,name: 'Copenhagen',pos:[55.675507, 12.574227]},
    {id: 4,name: 'Berlin',pos:[52.521248, 13.399038]},
    {id: 5,name: 'Paris',pos:[48.856127, 2.346525]}
  ];
  $scope.showCity = function(event, city) {
    $scope.selectedCity = city;
    $scope.map.showInfoWindow('myInfoWindow', this);
  };

});

<script src="https://maps.google.com/maps/api/js"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>

<div ng-app="ngMap" ng-controller="MyCtrl">

  <ng-map default-style="true" zoom="5" center="59.339025, 18.065818">

    <info-window id="myInfoWindow" >
      <div ng-non-bindable>
        <h4>{{selectedCity.name}}</h4>
      </div> 
    </info-window>

    <marker ng-repeat="c in cities" 
      position="{{c.pos}}" title="{{c.name}}"  id="{{c.id}}"  on-click="showCity(event, c)">
    </marker>

  </ng-map>

</div>

JSFiddle