我使用带有ng地图的google地图,并使用附加在这些标记上的标记和信息窗口添加到地图上,并带有ng-重复。我的角度观点如下:
<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。这里似乎没有问题,在加载视图和控制器之后,标记和infowindow在DOM中被很好地列出。
标记在地图上显示得很好,因为它们在执行on-bounds_changed="getLocations()"函数时被更新。
信息窗口列表也在getLocations()中更新,标记和信息窗口可以在DOM中看到,但是当我单击相应的标记时,信息窗口没有显示。尝试在视图中使用单个信息窗口项,并在用户单击标记时更新其内容,但没有发生任何更改。
谁能帮我指出正确的方向吗?我在这里不做什么?谢谢。
第二个问题:如果我必须在信息窗口内容中使用ng-non-bindable (ng-map否则会抱怨),我如何动态更新/生成信息窗口的内容?但是这个问题只有在显示了信息窗口之后才会出现。
发布于 2015-09-13 02:48:01
抱歉反应太晚了。
简单地说,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>
https://stackoverflow.com/questions/31303121
复制相似问题