在角度谷歌地图上创建动态标记图标答案

【问题标题】：Create dynamic marker icons on angular google maps在角度谷歌地图上创建动态标记图标
【发布时间】：2015-08-25 06:48:47
【问题描述】：

我正在使用angular-google-maps 在地图上显示一些标记。在我的网络应用程序中，我想显示大约 200 个标记，编号从 1 到 200。它们应该看起来像这样：

现在在我看来，创建 200 张带有不同数字的图片的方法是错误的，所以我正在考虑制作一张带有空白的图片，然后有一个 <div/> 让我在其中获取数字。但是，我完全陷入困境，无法在网上找到解决方案。

显示标记的 HTML 代码如下所示：

<ui-gmap-markers models="selectedCar.checkpoints"
                 coords="'Location'"
                 idkey="'Id'"
                 icon="'Icon'">
</ui-gmap-markers>

【问题讨论】：

查看这篇文章，humaan.com/custom-html-markers-google-maps
有趣的想法，但不幸的是只能直接用于谷歌地图，不能与 angular-google-maps 结合使用
我认为与其使用这个 Angular 谷歌地图，不如为谷歌地图创建目录，因为它非常简单，并且会打开许多自定义地图的方法。在 Angular 中集成谷歌地图更容易。

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

【解决方案1】：

您可以在标记选项中设置标签：

options: {
  icon:'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png',
  labelContent: "NUMBER HERE",
  labelClass: "ClusterLabel",
  labelAnchor: "30 34"
}

然后你会得到这样的东西

http://angular-ui.github.io/angular-google-maps/#!/api/marker 见 api->marker->options

【讨论】：