首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >angularjs-google-maps info-window不适用于ng-重复。

angularjs-google-maps info-window不适用于ng-重复。
EN

Stack Overflow用户
提问于 2015-07-08 20:32:34
回答 1查看 1.7K关注 0票数 1

我使用带有ng地图的google地图,并使用附加在这些标记上的标记和信息窗口添加到地图上,并带有ng-重复。我的角度观点如下:

代码语言:javascript
复制
<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.idmyMarker.id对应于infoWindow.markerId。这里似乎没有问题,在加载视图和控制器之后,标记和infowindow在DOM中被很好地列出。

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

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

谁能帮我指出正确的方向吗?我在这里不做什么?谢谢。

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

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-09-13 02:48:01

抱歉反应太晚了。

简单地说,info-window不能和ng-repeat一起使用。

http://plnkr.co/edit/lBxdmm?p=preview

代码语言:javascript
复制
  <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>

票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/31303121

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档