Google maps api 3 使用标记对象而不是数组时群集google map引脚

Google maps api 3 使用标记对象而不是数组时群集google map引脚,google-maps-api-3,markerclusterer,Google Maps Api 3,Markerclusterer,我正在管理此网站: 基本上,我所做的是从Web服务获取数据流,并对此进行更改。之后,我对这些数据做了各种处理,包括在谷歌地图上显示所有项目。 问题是,随着projectnumber的增长,(自定义)管脚开始重叠(不可见,不可单击) 所以我想把我的PIN串起来 我开始用它作为我的出发点 但现在出现了一个问题。由于我选择了一个名为的客户端过滤系统,因此我依赖于使用GoogleMaps的方式,即使用对象,而不是使用clusterer库中使用的标记数组 下面是我与filter.js一起生成地图的代码:

我正在管理此网站: 基本上,我所做的是从Web服务获取数据流,并对此进行更改。之后,我对这些数据做了各种处理,包括在谷歌地图上显示所有项目。 问题是,随着projectnumber的增长,(自定义)管脚开始重叠(不可见,不可单击)

所以我想把我的PIN串起来

我开始用它作为我的出发点

但现在出现了一个问题。由于我选择了一个名为的客户端过滤系统,因此我依赖于使用GoogleMaps的方式,即使用对象,而不是使用clusterer库中使用的标记数组

下面是我与filter.js一起生成地图的代码:

var googleMap = {
center_lat_lng: [52.14, 5.3],
map: null,
markers: {},
addMarker: function (project) {
    var that = this;
    var image = new google.maps.MarkerImage('@Url.Content("~/Content/img/marker.png")',
        new google.maps.Size(63, 27),
        new google.maps.Point(0, 0),
        new google.maps.Point(23, 27));
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(project.loclat, project.loclong),
        map: this.map,
        title: project.gebouwnaam,
        icon: image
    });

    marker.info_window_content = "<div class=\"gmapcontentwindow\"><h4>" + project.gebouwnaam + "</h4><img src=\"" + project.thumburl + "\" alt=\"" + project.gebouwnaam + "\" /><div class=\"gebouwdata\"><span class=\"date\">" + project.publicatiedatum + "</span><h5>" + project.plaats + "</h5><span>" + project.gebruiksfunctie + " | " + project.gebouwcategorie + "</span><span>" + project.licentiehouder + "</span><span class=\"stars " + project.rating + "\"></span>"
    if (project.akkoorddoorexpert == "True") {
        marker.info_window_content += "<span class=\"expert\"></span>"
    }
    var forwardUrl = '@Url.Content("~/Home/Details/")';
    marker.info_window_content += "<span  class=\"forward\"><a href=\"" + forwardUrl + project.id + "\" title=\"Bekijk " + project.gebouwnaam + " in detail\">Lees meer >></b></a></span></div></div>"
    this.markers[project.id] = marker

    google.maps.event.addListener(marker, 'click', function () {
        that.infowindow.setContent(marker.info_window_content)
        that.infowindow.open(that.map, marker);
    });
},

updateMarkers: function (filtering_result) {
    var google_map = this;
    $.each(google_map.markers, function () { this.setMap(null); })
    $.each(filtering_result, function () {
        google_map.markers[this.id].setMap(google_map.map);
    });
},

init: function () {
    var options = {
        center: new google.maps.LatLng(this.center_lat_lng[0], this.center_lat_lng[1]),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    this.map = new google.maps.Map(document.getElementById("gmap"), options)

    this.infowindow = new google.maps.InfoWindow({

    });
    //var markersarray = $(this.markers).toArray();
    //console.log(markersarray);
    //doet het nog niet???
    //http://a32.me/2012/05/handling-huge-amount-of-markers-on-google-maps-with-clusters/
    //var markerCluster = new MarkerClusterer(this.map, markersarray, {
    //  gridSize: 10,
    //  minimumClusterSize: 2
    //});
}
};
var谷歌地图={
液化天然气中心:[52.14,5.3],
map:null,
标记:{},
addMarker:功能(项目){
var=这个;
var image=new google.maps.MarkerImage('@Url.Content(“~/Content/img/marker.png”),
新google.maps.Size(63,27),
新的google.maps.Point(0,0),
新的google.maps.Point(23,27));
var marker=new google.maps.marker({
职位:新建google.maps.LatLng(project.loclat,project.Lolong),
map:this.map,
标题:project.gebouwnaam,
图标:图像
});
marker.info_window_content=“”+project.gebouwnaam+”+project.publicatiedatum+“+project.plaats+”+project.gebruiksfunctie+“|”+project.gebouwcategorie+“+project.licensiehouder+”
如果(project.akkoorddoorexpert==“True”){
marker.info_窗口_内容+=“”
}
var forwardUrl='@Url.Content(“~/Home/Details/”);
marker.info_窗口_内容+=“”
this.markers[project.id]=标记
google.maps.event.addListener(标记,'click',函数(){
that.infowindow.setContent(marker.info\u window\u content)
打开(that.map,marker);
});
},
updateMarkers:函数(筛选结果){
var google_map=this;
$.each(google_map.markers,函数(){this.setMap(null);})
$.each(过滤结果,函数(){
google\u map.markers[this.id].setMap(google\u map.map);
});
},
init:函数(){
变量选项={
中心:新的google.maps.LatLng(this.center\u lat\u lng[0],this.center\u lat\u lng[1]),
缩放:8,
mapTypeId:google.maps.mapTypeId.ROADMAP
};
this.map=new google.maps.map(document.getElementById(“gmap”),选项)
this.infowindow=new google.maps.infowindow({
});
//var markersarray=$(this.markers.toArray();
//log(markersarray);
//难道他不知道吗???
//http://a32.me/2012/05/handling-huge-amount-of-markers-on-google-maps-with-clusters/
//var markerCluster=新的MarkerClusterer(this.map、markersarray、{
//网格大小:10,
//最小群集大小:2
//});
}
};

project是从filter.js传递给init函数的对象。您需要将Marker Clusterer添加到全局范围,或者在对象中保留对它的引用

我不明白你的问题。如果您可以访问标记(如google.maps.Marker对象),您可以将它们添加到clusterer(单独添加,如果不是通过数组的话)。嗯,我也不明白,但我似乎无法将它们添加到clusterer中,首先,我应该在init函数中将对clusterer的调用放在哪里?您是指调用吗?或者创建MarkerClusterer对象?后者,如果我只是从document.ready调用它,它似乎可以工作,但是我无法在filter回调上访问(并修改)它,那么您需要在全局范围内声明它(或者在您的对象中保留对它的引用)。