Google Maps Javascript API 自定义标记号答案

【问题标题】：Google Maps Javascript API custom marker numberGoogle Maps Javascript API 自定义标记号
【发布时间】：2012-02-08 08:31:10
【问题描述】：

我正在使用 google maps javascript api V3 为我的标记使用自定义图像，我想知道是否有人知道如何在这些图像之上超级强加一个数字。我有一个盒子图像，我需要在盒子里动态放置一个数字。我不知道是否有一种风格的方式来做到这一点，或者是否有人可以告诉我如何通过 javascript 来做到这一点。

【问题讨论】：

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

【解决方案1】：

您可以使用地图实用程序库 (http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries)。 RichMarker 和 styledMarker（向下滚动页面）可能对您最有用。

选项 2 - 您可以推出自己的实现覆盖类（需要做一些工作）。例子在这里http://gmaps-samples-v3.googlecode.com/svn/trunk/overlayview/custommarker.html

选项 3 -（更繁琐）是创建带有数字的自定义标记图像。

【讨论】：

真是一个很棒的帖子！你的第一个链接太棒了:)
第二个链接坏了。

【解决方案2】：

对单字符标记标签的支持是 added to Google Maps 在版本 3.21（2015 年 8 月）中。请参阅new marker label API。不幸的是，这是limited to single digits，所以如果您需要 2 位以上的数字，您仍然需要使用 RichMarker 等附加库。

您现在可以像这样创建标签标记：

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(latitude, longitude), 
  icon: markerIcon,
  label: {
    text: '1'
  }
});

【讨论】：