google-maps-api-3 - 在 Google map V3 中使用图标字体作为标记

标签 google-maps-api-3 google-maps-markers font-awesome icon-fonts

我想知道是否可以使用图标字体图标(例如 Font Awesome)作为 Google map V3 中的标记来替换默认标记。要在 HTML 或 PHP 文档中显示/插入它们,标记的代码为:

<i class="icon-map-marker"></i>

最佳答案

我刚刚遇到了同样的问题 - 决定进行快速而肮脏的转换并在 github 上托管。

https://github.com/nathan-muir/fontawesome-markers

您可以手动包含 JS 文件,或使用 npm install fontawesome-markersbower install fontawesome-markers

只需包含 javascript 文件 fontawesome-markers.min.js 即可使用它们,如下所示:

new google.maps.Marker({
    map: map,
    icon: {
        path: fontawesome.markers.EXCLAMATION,
        scale: 0.5,
        strokeWeight: 0.2,
        strokeColor: 'black',
        strokeOpacity: 1,
        fillColor: '#f8ae5f',
        fillOpacity: 0.7
    },
    clickable: false,
    position: new google.maps.LatLng(lat, lng)
});

编辑(2016 年 4 月):现在有 v4.2 -> v4.6.1 的软件包

关于google-maps-api-3 - 在 Google map V3 中使用图标字体作为标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16375077/

相关文章:

gis - 我如何获得矩形所有四个角的坐标?

javascript - 谷歌地图路线点击事件

javascript - 如何在预先存在的折线上放置标记?

html - 工具提示未显示在 fontawesome 图标按钮上

css - 如果它有一个图标,它会改变按钮填充的选择器

javascript - 如何在谷歌地图API中使用多边形字符串

javascript - 放大时谷歌地图和标记聚类器出现奇怪的问题

android - 如何设置自定义谷歌地图标记的背景图片?

javascript - 如何在 C# 代码中使用 javaScript 库

css - Font Awesome JS 5 : fill "empty parts" on stacked icons