1

I use google maps with ng-map and use markers and info-windows attached to these markers added to the map with ng-repeat. My angular view is the following:

<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>

the myMarker.infoWindowId correspond to infoWindow.id and myMarker.id to infoWindow.markerId. There seems to be no issue in that, the markers and the infowindows are listed just fine in the DOM after loading the view and controller.

The markers are shown just fine on the map, as they are updated when the on-bounds_changed="getLocations()" function is executed.

The list of info-windows is updated in getLocations() too, the markers and the info-windows can be seen in the DOM, but the info-windows are not shown when I click on the corresponding marker. Tried using a single info-window item in the view and update its content when the user clicks on a marker, but nothing changed.

Can anyone please point me in the right direction to what am I not doing right here? Thank you.

A second question: if I must use ng-non-bindable in the info-window content (ng-map complains otherwise), how can I dynamically update/generate the content of the info-window? But this issue should show up only after the infow-windows are shown.

4

1 回答 1

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>

于 2015-09-13T02:48:01.103 回答