谷歌地图api点标记

Question

目前我使用StyledMarker图标(带有自定义颜色的默认气泡图标),但我看到一些网站使用更紧凑的"点"(点标记的图片).我的问题是,是否可以使用StyledMarker用点替换默认的气泡标记？如果没有,我该如何解决它(通过解决方案必须允许点的动态着色)？

Answer 1

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

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

您可以使用每个属性来实现所需的外观.

如果你想要更复杂的东西,我做了(免责声明:这是我,就像在我制作的那样)一个库,使用图标字体(如字体 - 真棒或材料图标)来渲染图像(使用辅助画布,然后获得它dataurl).

它基本上是一个你可以用作的图像工厂

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

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

Answer 2

StyledMarker使用（已弃用的）图表图像 API作为其图标。看起来里面没有“麻疹”/点（但你自己看看）。无论如何，快速一看，它本身只支持这两种：

• d_map_xpin_letter
• d_map_pin_letter

它是开源的，因此您可以对其进行修改以执行您想要的任何操作，但您可能只需要使用“正常”自定义标记即可获得“麻疹”。

• Fusion Tables 用户组关于如何查找麻疹 URL 的讨论