如何在 Google Maps 中使用 Angular Js 单击标记时呈现人员列表？答案

【问题标题】：How to use Angular Js with Google Maps To render a people list when clicking on a marker?如何在 Google Maps 中使用 Angular Js 单击标记时呈现人员列表？
【发布时间】：2016-08-12 02:56:54
【问题描述】：

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

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

【问题讨论】：

您使用的是angular-ui.github.io/angular-google-maps/#! 还是其他的？
是的，我使用了这个库，我只是渲染了地图和一些标记
但如果有更好的选择，请告知@kabaehr
不，我也用这个

标签： javascript angularjs google-maps google-maps-api-3

【解决方案1】：

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

<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 和parameter.control 传递的selectedMarker，因此是设备列表。此设备列表附加到每个标记模型。是的...也许不是最好的解决方案，但对我们的用例来说很好

【讨论】：

我很抱歉，但这应该和我在链接上所指的一样吗？ angular-ui.github.io/angular-google-maps/#!
我不明白你的问题。但我刚刚看到您想将数据放在地图下方而不是地图信息窗口内。这看起来会有所不同。
我想在标记一个国家的人数的标记上放一个标签，当我点击该标记时，这些人会从所有人员列表中显示