我使用带有ng-map的谷歌地图,并使用附加到这些标记的标记和信息窗口添加到地图中使用ng-repeat。我的角度观点如下:
<div id="mapWrap" map-lazy-load="https://maps.google.com/maps/api/js">
<map center="current-location" zoom="9" on-bounds_changed="getLocations()">
<marker ng-repeat="myMarker in myMarkers"
clickable="true"
on-click="showInfoWindow(event, '{{myMarker.infoWindowId}}')"
id="{{myMarker.id}}"
position="[{{myMarker.lat}},{{myMarker.lon}}]"
title="{{myMarker.title}}"
draggable="false"
opacity="{{myMarker.opacity}}"
visible="{{myMarker.visible}}"
icon="{{myMarker.icon}}">
</marker>
<info-window ng-repeat="infoWindow in infoWindows"
id="{{infoWindow.id}}"
visible-on-marker="{{infoWindow.markerId}}">
<div ng-non-bindable="">
<h1>{{infoWindow.name}}</h1>
<p>{{infoWindow.text}}</p>
<a href="{{infoWindow.url}}">Get forecast</a>
</div>
</info-window>
</map>
</div>
myMarker.infoWindowId
对应infoWindow.id
和myMarker.id
对infoWindow.markerId
。似乎没有问题,加载视图和控制器后,标记和infowindows在DOM中列出得很好。
标记在地图上显示得很好,因为它们在执行on-bounds_changed="getLocations()"
函数时会更新。
信息窗口列表也在getLocations()
中更新,标记和信息窗口可以在DOM中看到,但是当我点击相应的标记时,信息窗口不显示。尝试使用视图中的单个信息窗口项,并在用户单击标记时更新其内容,但没有任何更改。
任何人都可以指出我正确的方向,我在这里做的不是什么?谢谢。
第二个问题:如果我必须在信息窗口内容中使用ng-non-bindable
(否则会抱怨ng-map),如何动态更新/生成信息窗口的内容?但是这个问题应该只在显示信息窗口后显示出来。
答案 0 :(得分:5)
对于迟到的回复感到抱歉。
简短回答,info-window
不得与ng-repeat
一起使用。
http://plnkr.co/edit/lBxdmm?p=preview
<marker ng-repeat="myMarker in myMarkers"
name="A" text="B" url="http://foo.bar"
clickable="true"
on-click="showInfoWindow('myInfoWindow')"
id="{{myMarker.id}}"
position="[{{myMarker.lat}},{{myMarker.lng}}]"
draggable="false"
opacity="{{myMarker.opacity}}">
</marker>
<info-window id="myInfoWindow">
<div ng-non-bindable="">
<h1>{{this.name}}</h1>
<p>{{this.text}}</p>
<a href="{{this.url}}">Get forecast</a>
</div>
</info-window>