在 Google Maps V3 中使用图标字体作为标记
Posted
技术标签:
【中文标题】在 Google Maps V3 中使用图标字体作为标记【英文标题】:Using Icon Fonts as Markers in Google Maps V3 【发布时间】:2013-04-28 19:28:21 【问题描述】:我想知道是否可以在 Google Maps V3 中使用图标字体图标(例如 Font Awesome)作为标记来替换默认标记。要在 html 或 php 文档中显示/插入它们,标记的代码将是:
<i class="icon-map-marker"></i>
【问题讨论】:
我认为不可能,一种方法是从 Font Awesome 图标中提取 SVG 属性,然后使用 SVG 表示法定义google.maps.Symbol
。然后您就可以将它们用作符号
这是个好主意——在提取图标路径和一些修改后,我能够创建所需的效果。感谢您为我指明正确的方向!
不用担心,如果您有时间,您可以将它们全部放入 Font Awesome Google Maps
东西并托管在 Github/Bitbucket 上。我认为 Font Awesome 许可证会允许这样做。
Afaik 的人们已经在努力使字体与 Google Maps 兼容。同时利用它在编辑器中打开 font-awesome.svg 并搜索所需的图标语句。然后复制 SVG 路径并在谷歌地图中定义一个自定义多边形。详情请查看 Google Maps V3 参考/代码示例。
我知道怎么做,只是没时间去做。 Mapbox 设置了一种名为Maki
的字体。我正在考虑将其移植到 SVG 中
【参考方案1】:
我刚刚遇到了同样的问题 - 决定在 github 上进行快速而肮脏的转换和托管。
https://github.com/nathan-muir/fontawesome-markers
您可以手动包含 JS 文件,也可以使用npm install fontawesome-markers
或bower 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 的软件包
【讨论】:
+1 用于在一年多后保持脚本更新! 不错。我发现偏移图标很有用:anchor: new google.maps.Point(30,-30) fontawesome-markers.4.6.1.min.js - github.com/veteze/fontawesome-markers/blob/patch-1/… 我觉得值得一提的是 js 文件有 0.5 MB 大。 在 font-awesome v4.1 引入的fontawesome-markers.min.js v4.6.1 script file 中找不到GRADUATION_CAP icon。【参考方案2】:我知道这是一篇旧帖子,但以防万一您现在可以使用 MarkerLabel
对象:
var marker = new google.maps.Marker(
position: location,
map: map,
label:
fontFamily: 'Fontawesome',
text: '\uf299'
);
为我工作。
.
Reference Google Maps Maker
【讨论】:
谢谢老兄,有了这个就不需要使用任何外部插件了。 这真是令人困惑。你说的是markerLABEL而不是marker。 您可以将标签 obj 定义为标记的选项。根据文档“向标记添加标签。标签可以是字符串,也可以是 MarkerLabel 对象。” 这是合法的!我不想要粉红色的标记,所以我只是将Marker.icon = ' '
设置为一个空格,就像 Jason 的回答中所做的那样。 MarkerLabel 可以采用包括字体大小和颜色在内的各种样式来自定义图标。很简单。谢谢@guido!
对于更高版本的API,如果上面的代码不起作用,只需进一步将'Fontawesome'用双引号括起来“'Fontawesome'”***.com/questions/50256889/…【参考方案3】:
在我意识到 Nathan 在上面做了同样的事情之前,我尝试了同样的事情(使用“markerwithlabel”实用程序库):http://jsfiddle.net/f3xchecf/
function initialize()
var myLatLng = new google.maps.LatLng( 50, 50 ),
myOptions =
zoom: 4,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
,
map = new google.maps.Map( document.getElementById( 'map-canvas' ), myOptions ),
marker = new MarkerWithLabel(
position: myLatLng,
draggable: true,
raiseOnDrag: true,
icon: ' ',
map: map,
labelContent: '<i class="fa fa-send fa-3x" style="color:rgba(153,102,102,0.8);"></i>',
labelAnchor: new google.maps.Point(22, 50)
);
marker.setMap( map );
initialize();
【讨论】:
这很好,因为它不需要额外的 js,但我喜欢这两种解决方案。 我试图让它工作,但它不起作用,也不能在 fiddel 中工作。您有更新的解决方案吗? @Aaron 您需要使用另一个答案中链接的 github 库。 github.com/nathan-muir/fontawesome-markers【参考方案4】:轻量级解决方案
字体真棒标记:480kb
带有标签的标记:25kb
要避免这些依赖,只需转到fontawesome-markers,找到所需图标的路径,并将其包含如下:
var icon =
path: "M27.648-41.399q0-3.816-2.7-6.516t-6.516-2.7-6.516 2.7-2.7 6.516 2.7 6.516 6.516 2.7 6.516-2.7 2.7-6.516zm9.216 0q0 3.924-1.188 6.444l-13.104 27.864q-.576 1.188-1.71 1.872t-2.43.684-2.43-.684-1.674-1.872l-13.14-27.864q-1.188-2.52-1.188-6.444 0-7.632 5.4-13.032t13.032-5.4 13.032 5.4 5.4 13.032z",
fillColor: '#E32831',
fillOpacity: 1,
strokeWeight: 0,
scale: 0.65
marker = new google.maps.Marker(
position: myLatlng,
map: map,
icon: icon
);
【讨论】:
您也可以到fontawesome.com/icons下载任意图标的svg并获取路径。 我最终这样做了,它让事情变得简单。谢谢。 我发现这是最简单的方法 - 特别是如果您只使用一个图标类。【参考方案5】:在现代浏览器中,可以使用画布将字体渲染为 png,然后使用数据 URI 方案:
function getIcon(glyph, color)
var canvas, ctx;
canvas = document.createElement('canvas');
canvas.width = canvas.height = 20;
ctx = canvas.getContext('2d');
if (color)
ctx.strokeStyle = color;
ctx.font = '20px FontAwesome';
ctx.fillText(glyph, 0, 16);
return canvas.toDataURL();
例如:getIcon("\uf001")
表示音符。
【讨论】:
ctx.fillStyle = color;
,或ctx.strokeText
而不是ctx.fillText
【参考方案6】:
如果你想要awesomefont MARKER 里面有一个awesomefont 图标:
1.复制SVG path of the awesomefont marker(点击下载并复制SVG路径)并将其用作icon
(记得注明作者,参见license)。
然后,您可以将其颜色更改为您想要的任何颜色。
2. 作为label
,您只需插入很棒的字体图标代码和您想要的颜色。
html,
body,
#map
height: 100%;
width: 100%;
margin: 0;
padding: 0;
<script src="https://maps.googleapis.com/maps/api/js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div id="map"></div>
<script>
function init()
var map = new google.maps.Map(document.getElementById('map'),
zoom: 6,
center: new google.maps.LatLng(51.509865, -0.118092)
);
var icon =
path: "M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0z", //SVG path of awesomefont marker
fillColor: '#333333', //color of the marker
fillOpacity: 1,
strokeWeight: 0,
scale: 0.09, //size of the marker, careful! this scale also affects anchor and labelOrigin
anchor: new google.maps.Point(200,510), //position of the icon, careful! this is affected by scale
labelOrigin: new google.maps.Point(205,190) //position of the label, careful! this is affected by scale
var marker = new google.maps.Marker(
position: map.getCenter(),
map: map,
icon: icon,
label:
fontFamily: "'Font Awesome 5 Free'",
text: '\uf0f9', //icon code
fontWeight: '900', //careful! some icons in FA5 only exist for specific font weights
color: '#FFFFFF', //color of the text inside marker
,
);
google.maps.event.addDomListener(window, 'load', init);
</script>
【讨论】:
【参考方案7】:我整理了一个简单的 JS 库,它使用 Font Awesome 图标生成漂亮的 SVG 标记。 https://github.com/jawj/MapMarkerAwesome
【讨论】:
不错!谢谢你!【参考方案8】:可以直接从 @fortawesome/free-solid-svg-icons 导入 svg 并使用 Icon Interface。
import faMapMarkerAlt from "@fortawesome/free-solid-svg-icons";
function initMap(): void
const center = lat: 0, lng: 0 ;
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
zoom: 9,
center,
);
new google.maps.Marker(
position: lat: 0, lng: 0 ,
map,
icon:
path: faMapMarkerAlt.icon[4] as string,
fillColor: "#0000ff",
fillOpacity: 1,
anchor: new google.maps.Point(
faMapMarkerAlt.icon[0] / 2, // width
faMapMarkerAlt.icon[1] // height
),
strokeWeight: 1,
strokeColor: "#ffffff",
scale: 0.075,
,
);
可以试试:https://codesandbox.io/embed/github/googlemaps/js-samples/tree/sample-marker-modern
【讨论】:
以上是关于在 Google Maps V3 中使用图标字体作为标记的主要内容,如果未能解决你的问题,请参考以下文章
Google Maps v3 - 防止 API 加载 Roboto 字体
Google Maps API v3:如何动态更改标记图标?
如何在 Google Maps API v3 中使用 SVG 标记