谷歌地图 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 来定义图标。

MarkerClusterPlus 示例

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);

Answer 2

您需要正确设置 MarkerClusterer 的 imagePath 属性（设置为包含集群图像的位置）。一种可能的来源是 google 示例：

var markerCluster = new MarkerClusterer(map, markers,
   {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

proof of conceptr fiddle

代码 sn-p：

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(52.5167, 13.3833),
    /*<?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);
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(52.5167, 13.38),
    /*<?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);
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(52.51, 13.3833),
    /*<?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, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });



}


google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<div id="map"></div>
<input id="user_latitude" />
<input id="user_longitude" />