它在特定位置显示多个标记。如何显示标记而不是数字?下面给出了代码和输出图像。请帮助我如何获得预期的结果?
注意:
4 个标记具有相同的纬度和经度。我想显示 4 个不同的标记而不是一个标记。
JS代码:
<script>
var map, infoBubble;
function initialize() {
var mapCenter = new google.maps.LatLng(52.5167, 13.3833);
$('#user_latitude').val(52.5167);
$('#user_longitude').val(13.3833);
var mapOptions = {
zoom: 3,
center: mapCenter,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
minZoom: 3,
scrollwheel: false
};
var infowindow = new google.maps.InfoWindow();
map = new google.maps.Map(document.getElementById("map"), mapOptions);
var markers = [];
<?php foreach($pets as $pet):?>
marker = new google.maps.Marker({
position: new google.maps.LatLng(<?php echo $pet['pet_lat']?>, <?php echo $pet['pet_long']?>),
/*<?php //if():?>
icon: 'http://cdn.com/my-custom-icon.png',
<?php //else:?>
icon: 'http://cdn.com/my-custom-icon.png',
<?php //endif;?>*/
});
markers.push(marker);
<?php endforeach;?>
var markerCluster = new MarkerClusterer(map, markers);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
最佳答案
我不知道您使用的是哪个版本的 MarkerClusterer(MarkerClusterer 或 MarkerClustererPlus),但它可能是不再有效的集群默认图标的 url。
检查你的浏览器开发工具,你应该在 png 文件上有 404 错误。
您必须使用选项初始化 MarkerCluster 以定义图标。
MarkerClustererPlus 示例
var options = {
ignoreHidden: true,
clusterClass: cssClass,
maxZoom: 19,
styles: [
{
height: 32,
width: 32,
textSize: 11,
url: "/myhost/myicon1.png"
},
{
height: 36,
width: 36,
textSize: 12,
url: "/myhost/myicon2.png"
},
{
height: 40,
width: 40,
textSize: 13,
url: "/myhost/myicon3.png"
},
{
height: 40,
width: 40,
textSize: 13,
url: "/myhost/myicon4.png"
},
{
height: 48,
width: 48,
textSize: 15,
url: "/myhost/myicon5.png"
}
]
};
cluster = new MarkerClusterer(map, [], options);
关于javascript - 谷歌地图 MarkerClusterer 显示数字而不是标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43683474/