javascript 如何更改谷歌地图标记聚类器的字体颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18484484/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change font color of google maps marker clusterer
提问by Vikas Ghodke
Could anybody please tell me how to change the font color of a markerclusterer marker. This is my current code for styling the marker
谁能告诉我如何更改markerclusterer 标记的字体颜色。这是我当前用于标记样式的代码
mcOptions = {styles: [{
height: 27,
url: "image.png",
width: 35
}],
maxZoom: 8
}
var markerCluster = new MarkerClusterer(map, markers, mcOptions);
回答by Rahul Gupta
A working JSFIDDLEto change the font properties of the clustermarker. Below is the code:
用于更改clustermarker字体属性的有效 JSFIDDLE。下面是代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MarkerClusterer v3 Simple Example</title>
<style >
body {
margin: 0;
padding: 10px 20px 20px;
font-family: Arial;
font-size: 16px;
}
#map-container {
padding: 6px;
border-width: 1px;
border-style: solid;
border-color: #ccc #ccc #999 #ccc;
-webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
-moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
width: 600px;
}
#map {
width: 600px;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/examples/data.json"></script>
<script type="text/javascript" src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
<script>
function initialize() {
var center = new google.maps.LatLng(37.4419, -122.1419);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
for (var i = 0; i < 100; i++) {
var dataPhoto = data.photos[i];
var latLng = new google.maps.LatLng(dataPhoto.latitude,
dataPhoto.longitude);
var marker = new google.maps.Marker({
position: latLng
});
markers.push(marker);
}
var mcOptions = {
//imagePath: 'https://googlemaps.github.io/js-marker-clusterer/images/m',
styles:[{
url: "https://googlemaps.github.io/js-marker-clusterer/images/m1.png",
width: 53,
height:53,
fontFamily:"comic sans ms",
textSize:15,
textColor:"red",
//color: #00FF00,
}]
};
var markerCluster = new MarkerClusterer(map, markers, mcOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<h3>A simple example of MarkerClusterer (100 markers)</h3>
<div id="map-container"><div id="map"></div></div>
</body>
</html>
Here is the API reference linkfor more options and customizations.
这是更多选项和自定义的API 参考链接。
回答by Vikas Ghodke
You can check this Documentation for Marker Clustererunder class ClusterIconStyle
您可以在类 ClusterIconStyle 下查看Marker Clusterer 的文档
There is an option named textColorwhich sets the color of the label text shown on the cluster icon.
有一个名为的选项textColor，用于设置集群图标上显示的标签文本的颜色。
回答by Sayali
public Bitmap makeIcon(String text, int textColor) {
ensureViewsSetUp();
if (mTextView != null) {
mTextView.setText(text);
mTextView.setTextColor(textColor);
}
return makeIcon();
}
On google map there are clusters and by default the cluster background color is blue and text (number) color is white,
if you want to change that text color then you need change in this method of IconGenerator.java
在谷歌地图上有集群，默认情况下，集群背景颜色为蓝色，文本（数字）颜色为白色，如果您想更改该文本颜色，则需要更改此方法 IconGenerator.java
回答by Vasilii Suricov
You can pass just one element in stylesoption, like this
您可以在styles选项中只传递一个元素，就像这样
var options = {
maxZoom: 15,
styles:[{
url: 'https://googlemaps.github.io/js-marker-clusterer/images/m1.png',
width: 53,
height: 53,
textColor: '#fff',
}]
};
var mc = new MarkerClusterer(map, markers, options);
but in this case you will have one img for all cluster sizes (1-10-100). Better to pass 5 elements. One for each cluster size, but it's too many rows of code (I've 3 clusterers on the map).
但在这种情况下，对于所有集群大小 (1-10-100)，您将拥有一个 img。最好传递 5 个元素。每个集群大小一个，但代码行太多（我在地图上有 3 个集群器）。
So for me works this
所以对我来说是这样的
var mc = new MarkerClusterer(map, [], {
imagePath: 'https://googlemaps.github.io/js-marker-clusterer/images/m',
maxZoom: 15
});
mc.setStyles(mc.getStyles().map(function (style) {
style.textColor = '#fff';
return style;
}));
mc.addMarkers(markers)
