在 angular google 地图上创建动态标记图标

Question

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

现在在我看来，创建 200 张不同编号的图片的方法是错误的，所以我正在考虑一张白色 space 的图片，然后有一张 <div/> 让我里面的号码但是，我完全卡住了，无法在网上找到解决方案。

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

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

Answer 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

在 angular google 地图上创建动态标记图标

Create dynamic marker icons on angular google maps

google-maps

google-maps-api-3

angularjs

angular-google-maps