我有以下代码:
<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]}}
的内容
答案 0 :(得分:5)
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);
};
});
&#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;
答案 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>