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

时间:2015-11-30 11:52:13

标签: angularjs google-maps ng-map

我有以下代码:

<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]}}的内容

2 个答案:

答案 0 :(得分:5)

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

&#13;
&#13;
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);
  };

});
&#13;
<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>
&#13;
&#13;
&#13;

JSFiddle

答案 1 :(得分:0)

你可以做这样的事情

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