javascript - 谷歌地图 MarkerClusterer 显示数字而不是标记

Question

它在特定位置显示多个标记。如何显示标记而不是数字？下面给出了代码和输出图像。请帮助我如何获得预期的结果？

注意:

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>

输出

Answer 1

我不知道您使用的是哪个版本的 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);