javascript - 在谷歌地图标记标签的字体真棒图标标记中放置一个数字
问题描述
我在下面有这个谷歌地图标记,我使用了一个很棒的字体标记图标作为标签/图标。但是使用 label 属性我不知道我怎么能 a.) 给标记上色 b.) 在标记内放一个数字。
我正在关注这个 SO链接
这是我的代码
var marker = new google.maps.Marker({
position: {
lat: eventArray[0].Latitude,
lng: eventArray[0].Longitude
},
map: scope.map,
label: {
fontFamily: 'Fontawesome',
text: '\uf041',
color: '#008489' // this colors the text inside the label, not the marker color
},
});
解决方案
假设您要实现的是带有数字的 awesomefont 标记,您只需复制awesomefont 标记的 SVG 路径(单击下载并复制 SVG 路径,请参阅许可证)并将其用作icon
. 然后,您可以将其颜色更改为您想要的任何颜色。作为 `label 只输入你想要的文本/颜色。
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<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: '#008489', //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: {
text: '3', //text inside marker
color: '#FFFFFF', //color of the text inside marker
},
});
}
google.maps.event.addDomListener(window, 'load', init);
</script>
推荐阅读
- java - TableColumn #setCellValueFactory 用于具有 HashMaps 的类
- css - 使用 Angular 切换 div 类的可见性
- javascript - 双引号内的单引号弄乱了javascript代码
- c# - 如何修复“枚举约束失败”?
- python-3.x - 使用 ImageDataGenerator() 处理医学图像
- python - 缩小python代码会使其更快吗?
- google-apps-script - 从 HTML 收集输入,然后返回到 HTML
- c# - C#“EmguCV”中 OpenCV 中的“getDecisionFunction”等价物是什么?
- r - 如何将灰色阴影区域添加到 geom_density 以表示标准误差?
- r - 如何在添加响应值的同时将多个值组合成几组?