使用 angular google 地图指令显示标记标签

Question

我正在尝试了解如何使用 angular UI google 地图指令使标记指令显示标签。

如果您查看 this plunkr，它与 angular ui google 地图示例几乎相同，除了以下更改：

        <ui-gmap-markers models="randomMarkers" coords="'self'" icon="'icon'"
        options="{labelClass:'marker_labels',labelAnchor:'12 60',labelContent:'title'}"
        >
        </ui-gmap-markers>

（选项部分是我唯一的补充）

你会看到它正在显示标签，但它们都显示为字符串 "title"，而我的意图是显示实际标题，每个标记显然是唯一的，并且是属性标记模型。

知道如何进行这项工作吗？

Answer 1

ui-gmap-markers 指令的选项属性也可以是标记依赖选项部分的名称 (see section "markers")。

所以只需输入您的选项

{labelClass:'marker_labels',labelAnchor:'12 60',labelContent:'title'}

在某个键下进入你的标记模型（当然是用动态的东西交换 labelContent）并在 ui-gmap-markers 指令的选项属性中提供这个键的名称。

请查看您修改后的 plunkr here。

使用 angular google 地图指令显示标记标签

showing marker labels using angular google maps directive

label

google-maps-markers

angularjs