使用新的 Google Chart API 的动态地图标记图标？答案

【问题标题】：Dynamic map marker icons with new Google Chart API?使用新的 Google Chart API 的动态地图标记图标？
【发布时间】：2019-08-09 23:33:50
【问题描述】：

多年来，我使用此处描述的 Google 图表 API 在 Javascript 中创建了 Google 动态地图标记：

Dynamic icons

地图标记的生成几天后不再起作用。链接顶部清楚地说明了这一点：
“警告：此 API 已弃用，计划于 2019 年 3 月 14 日关闭。请改用积极维护的 Google Charts API。”

他们与新的 Google Chart API 的链接没有提供任何替代方法来创建地图标记，例如带有自定义颜色和自定义字母的图标（我需要的）。

我在新 API 中找到的最接近的是： Customizing Markers
但在这里唯一的选择是用自定义图像替换默认的谷歌标记。所以似乎没有动态生成标记。

也许我监督过一些事情，或者任何人都知道创建谷歌地图的服务，比如带有字母和自定义颜色的标记。

【问题讨论】：

标签： javascript api dynamic charts marker

【解决方案1】：

在这两者之间，我找到了一个解决方案，允许在标记内设置定义的颜色和标签。它可以在没有 Google Chart API 的情况下工作（仅限 Google maps API）。

解决方案的第一部分取自here（参见vokimon的回答）：它采用 SVG 路径而不是预定义的图像 (png)。这样您就可以定义自定义颜色（如果需要，甚至可以定义 more）：

function createPin (color) {
        return {
            path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
            fillColor: color,
            fillOpacity: 1,
            strokeColor: '#000',
            strokeWeight: 2,
            scale: 1,
            labelOrigin: new google.maps.Point(0, -30)
        };
    }

“labelOrigin”对于正确定位标签很重要。

现在您可以自己创建标记了：

var marker = new google.maps.Marker({
   map: <yourMapInstance>,
   position: new google.maps.LatLng(<latitude>, <longitude>),
   icon: createPin('#F6AC01'),
   label: { 
            text: 'X',
            fontWeight: 'bold'
          },
});

如果需要，还有更多不错的标签选项，请描述here。

【讨论】：

【解决方案2】：

我还注意到我的自定义颜色图标消失了。 http://maps.google.com/mapfiles/ms/icons处好像存储了一些预生成的图标，比如http://maps.google.com/mapfiles/ms/icons/green-dot.png

我设法找到了由 Google 托管的图标列表：https://sites.google.com/site/gmapsdevelopment/

【讨论】：

适合任何目的的好清单。在我的情况下，我需要在标记内设置颜色以及一个字母（标签）。