有人能告诉我如何更改标记聚类标记的字体颜色吗。这是我当前用于标记样式的代码
mcOptions = {styles: [{
height: 27,
url: "image.png",
width: 35
}],
maxZoom: 8
}
var markerCluster = new MarkerClusterer(map, markers, mcOptions);
一个正在工作的JSFIDDLE,用于更改clustermarker的字体属性。以下是代码:
<!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>
以下是API参考链接,了解更多选项和自定义。
您可以在ClusterIconStyle 类下查看此文档中的Marker Clusterer
有一个名为textColor
的选项,用于设置集群图标上显示的标签文本的颜色。
您可以在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);
但在这种情况下,对于所有集群大小(1-10-100),您将有一个img。最好通过5个元素。每个集群大小一个,但代码行太多(我在地图上有3个集群)。
所以对我来说,这是
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)
public Bitmap makeIcon(String text, int textColor) {
ensureViewsSetUp();
if (mTextView != null) {
mTextView.setText(text);
mTextView.setTextColor(textColor);
}
return makeIcon();
}
在谷歌地图上有集群,默认情况下集群背景颜色为蓝色,文本(数字)颜色为白色,如果您想更改文本颜色,则需要更改IconGenerator.java
的此方法