Add custom image to Marker Cluster without overwriting markers

折月煮酒 提交于 2020-01-11 14:44:05

问题


I have the following jQuery code which adds map marker clusters:

markerCluster = new MarkerClusterer(map);

I'm using markerCluster.addMarker(Marker); to add individual markers to clusters (full code block at the bottom of the page).

The problem I have is my clusters have no image attached by default.

I can do the following:

var options = 'an image path';
markerCluster = new MarkerClusterer(map,markers,options);

However as options is the third parameter, I effectively overwrite the second parameter. Is there a way to set an image to MarkerCluster without overwriting the markers?

(function () {
            var address = response[key]["address"];
            $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+response[key]["post_code"]+'&sensor=false', null, function (data) {
                var p = data.results[0].geometry.location
                var latlng = new google.maps.LatLng(p.lat, p.lng);
                var Marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    content: address
                });
                markerCluster.addMarker(Marker);
                google.maps.event.addListener(Marker, 'click', function () {    
                    infowindow.setContent(this.content);
                    infowindow.open(map, this);
                });
            });
        })();

回答1:


By default, MarkerClusterer looks for markers in the ../images folder (relative to the position of markerclusterer.js).

The easiest thing for you would be to get the image folder from the github, so the structure of your files is following:

-images
  -m1.png
  -m2.png
  -..etc other files from the directory
-SOME_FOLDER //can be lib, libraries, what have you
  -markerclusterer.js

Alternatively you can play with imagePath attribute of the options object, so you would have something like this:

var options = { imagePath: "PATH_TO_IMAGES_FOLDER/m" };
markerCluster = new MarkerClusterer(map, markers, options);


来源:https://stackoverflow.com/questions/37469525/add-custom-image-to-marker-cluster-without-overwriting-markers

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!