小编Tih*_*iha的帖子

angularjs-google-maps - 信息窗口不适用于ng-repeat

我使用带有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>
Run Code Online (Sandbox Code Playgroud)

将myMarker.infoWindowId对应于infoWindow.id和myMarker.id到infoWindow.markerId.似乎没有问题,加载视图和控制器后,标记和infowindows在DOM中列出得很好.

标记在地图上显示得很好,因为它们在on-bounds_changed="getLocations()"执行功能时会更新.

信息窗口列表也会更新getLocations(),标记和信息窗口可以在DOM中看到,但是当我点击相应的标记时,信息窗口不显示.尝试使用视图中的单个信息窗口项,并在用户单击标记时更新其内容,但没有任何更改.

任何人都可以指出我正确的方向,我在这里做的不是什么?谢谢.

第二个问题:如果我必须ng-non-bindable在信息窗口内容中使用(否则ng-map抱怨),我该如何动态更新/生成信息窗口的内容?但是只有在显示infow-windows之后才会出现此问题.

javascript google-maps google-maps-api-3 angularjs angularjs-google-maps

1
推荐指数
1
解决办法
1667
查看次数