Google將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 whith選項來定義圖標。

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

Answer 2

您需要正確設置MarkerClusterer的imagePath屬性（設置為包含群集圖像的位置）。 一種可能的來源是google示例：

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

概念證明的小提琴

代碼段：

 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" />