11

目前我使用 StyledMarker 图标（具有自定义颜色的默认气泡图标），但我看到一些网站使用更紧凑的“点”（点标记的图片）。我的问题是是否可以使用 StyledMarker 将默认气泡标记替换为点？如果没有，我该如何解决（顺便说一下，解决方案必须允许点的动态着色）？

4

3 回答 3

29

您可以将标记图标声明为符号并相应地对其进行自定义。

new google.maps.Marker({
    map: map,
    position: map.getCenter(),
    icon: {
        path: google.maps.SymbolPath.CIRCLE,
        fillColor: '#00F',
        fillOpacity: 0.6,
        strokeColor: '#00A',
        strokeOpacity: 0.9,
        strokeWeight: 1,
        scale: 7
    }
});

您可以使用每个属性来获得所需的外观。

在此处输入图像描述

如果你想要更详细的东西，我做了（免责声明：是我，就像我做的那样）一个库来使用图标字体（例如 font-awesome 或材料图标）来渲染图像（使用辅助画布，然后得到它数据地址）。

在此处输入图像描述

它基本上是一个图像工厂，您可以将其用作

new google.maps.Marker({
    map: map,
    position: map.getCenter(),
    icon: MarkerFactory.autoIcon({
        label: 'f1b9',
        font: 'FontAwesome',
        color: '#CC0000',
        fontsize: 20
    })
});

您甚至可以省略该font属性，它会呈现您传递给它的文字文本。我有时用它来枚举标记。

于 2017-10-01T23:46:21.970 回答
0

StyledMarker使用（已弃用）Chart Images API作为其图标。看起来里面没有“麻疹”/点（但请自己寻找）。无论如何，快速浏览一下，它本身只支持这两个：

  • d_map_xpin_letter
  • d_map_pin_letter

它是开源的，因此您可以对其进行修改以做任何您想做的事情，但您可能只需要使用“普通”自定义标记来获取“麻疹”。

于 2012-12-13T14:28:48.047 回答
0

您可以使用自定义圆圈为自己画一个点：https ://developers.google.com/maps/documentation/javascript/examples/circle-simple

于 2013-04-17T12:59:03.950 回答