angularjs-google-maps

Question

我将 google 地图与 ng-map 一起使用，并使用标记和附加到这些标记的信息 -windows 通过 ng-repeat 添加到地图中。我的 angular 观点如下：

<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。这似乎没有问题，加载视图和控制器后，标记和信息 windows 在 DOM 中列出得很好。

标记在地图上显示得很好，因为它们会在执行 on-bounds_changed="getLocations()" 函数时更新。

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

任何人都可以指出我在这里没有做什么的正确方向吗？谢谢。

第二个问题：如果我必须在 info-window 内容中使用 ng-non-bindable（否则 ng-map 会抱怨），我如何动态地 update/generate 信息的内容-window?但是这个问题应该只有在显示 infow-windows 之后才会出现。

Answer 1

抱歉回复晚了。

简答，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>

angularjs-google-maps - info-window 不适用于 ng-repeat

angularjs-google-maps - info-window does not work with ng-repeat

javascript

google-maps

google-maps-api-3

angularjs