javascript - 谷歌地图 api 点标记

Question

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

Answer 1

您可以将标记图标声明为 symbol并相应地定制它。

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
    }
});

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



如果你想要更精致的东西，我做了(免责声明: 是我，就像我做的一样 ) a library to use icon fonts (such as font-awesome or material icons) to render images (使用辅助 Canvas ，然后获取其 dataurl)。



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

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

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