如何将Angular Js与谷歌地图结合使用单击标记时渲染人员列表

How to use Angular Js with Google Maps To render a people list when clicking on a marker?

本文关键字：列表 单击 Angular Js 结合 谷歌地图      更新时间：2023-09-26

我使用的是Angular JS v1，当我点击地图上的一个标记时，我需要呈现一个人员列表，我需要标记上有数字，这个数字是来自这个国家的人数的指标，当我在地图上点击这个标记时，下方会出现一个与标记相同数字的列表

与本网站类似http://www.travelgirls.com/trips/

这里有一个例子，我希望它能帮助你。如果不是，我稍后会改进这个答案（我现在没有那么多时间）

<ui-gmap-google-map center='map.center' zoom='map.zoom'>
    <ui-gmap-markers models="markers" coords="'self'" options="markerOptions" events="markerEvents" icon="'icon'"></ui-gmap-markers>
    <ui-gmap-window coords="model.selectedMarker" show="model.selectedMarker.show" templateUrl="'/app/controls/gMapsControl/mapInfoWindow.html'" templateParameter="model.selectedMarker" closeClick="model.closeInfoWindow(model)" isIconVisibleOnClick="false"></ui-gmap-window>
</ui-gmap-google-map>

/app/controls/gMapsControl/mapInfoWindow.html'：

<div>
    <h5>{{parameter.title}}</h5>
    <h6>Affected Devices</h6>
    <ul>
        <li ng-repeat="device in parameter.control">
            <span class="clickable-device" ui-sref="main.details({id: device.id})">{{device.name}}</span>
        </li>
    </ul>
</div>

此信息窗口显示单击标记时的设备列表。从渲染列表中选择设备时，也可以路由到另一个站点。

parameter是通过templateParameter的selectedMarker，因此parameter.control是设备列表。此设备列表附加到每个标记模型。是 啊也许不是最好的解决方案，但它对我们的用例

来说很好
相关文章：