将自定义图像添加到标记群集而不覆盖标记 [英] Add custom image to Marker Cluster without overwriting markers

问题描述

我有以下jQuery代码添加了地图标记集群：

  markerCluster = new MarkerClusterer（map）; 
  

我正在使用 markerCluster.addMarker（Marker）; 将单个标记添加到群集（页面底部的完整代码块）。

我遇到的问题是我的群集默认没有附加图像。

我可以这样做：

  var options ='an图像路径'; 
 markerCluster = new MarkerClusterer（map，markers，options）; 
  

然而，由于选项是第三个参数，我有效地覆盖了第二个参数。有没有办法将图像设置为MarkerCluster而不覆盖标记？

= 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（{
位置：latlng，
map：地图，
内容：地址
} ）;
markerCluster.addMarker（Marker）;
google.maps.event.addListener（Marker，'click'，function（）{
infowindow.setContent（this.content）;
infowindow.open（map，this）;
}）;
}）;
}）（）;

解决方案

默认情况下， MarkerClusterer 在 ../ images 文件夹中查找标记（相对于 markerclusterer.js ）。



最简单的办法是从 github ，所以你的文件结构如下：



  -images 
 -m1.png 
 -m2.png 
  -  ..等目录下的其他文件
 -SOME_FOLDER //可以是lib，libraries，你有什么
 -markerclusterer.js 
  

或者，您可以使用 imagePath 选项对象的c>属性，所以你可以这样做：



  var options = {imagePath：PATH_TO_IMAGES_FOLDER / m}; 
 markerCluster = new MarkerClusterer（map，markers，options）; 
  




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

解决方案

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

这篇关于将自定义图像添加到标记群集而不覆盖标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！