gpt4 book ai didi

javascript - 如何更改谷歌地图标记集群器的字体颜色

转载 作者:数据小太阳 更新时间:2023-10-29 04:24:24 24 4
gpt4 key购买 nike

谁能告诉我如何更改 markerclusterer 标记的字体颜色。这是我当前用于设置标记样式的代码

mcOptions = {styles: [{
height: 27,
url: "image.png",
width: 35
}],
maxZoom: 8
}

var markerCluster = new MarkerClusterer(map, markers, mcOptions);

最佳答案

A working 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 reference link更多选项和定制。

关于javascript - 如何更改谷歌地图标记集群器的字体颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18484484/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com