集群上的 Google Maps InfoWindow [英] Google Maps InfoWindow on Clusters

问题描述

我有一张地图，上面有很多标记.所有这些标记都有一个信息窗口.使用 Markers Cluster Lib (http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js) 我得到点击时放大的集群.
一些标记具有完全相同的坐标，因此即使我达到最大缩放，它们也会变成一个簇.到目前为止，这一切都很好，除了我还想在单击群集时打开一个 InfoWindow，该群集在缩放时永远不会拆分为标记.在这个 InfoWindow 中，我想根据它包含的标记显示信息.

这是我目前的代码.它适用于标记上的 InfoWindow，但在单击集群时不显示 InfoWindow.

function initialize(lat, lng) {var myLatlng = new google.maps.LatLng(lat,lng);var mapOptions = {地图类型控制:假，中心:myLatlng，缩放:14，最大区域:15};map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);google.maps.event.addListener(地图，'空闲'，函数(){getMarkers(map.getBounds());});};函数getMarkers(边界){var filter = build_filter();var 边界 = {'swlat':bounds.getSouthWest().lat(),'swlng':bounds.getSouthWest().lng(),'nelat':bounds.getNorthEast().lat(),'nelng':bounds.getNorthEast().lng()};数据 = {'界限':界限}$.ajax({类型:POST"，数据类型:'json'，异步:假，url: "",数据:数据，缓存:真实，成功:函数(json){addMarkers2Map(json);}});}函数 addMarkers2Map(data){$('#properties_counter').html(data.length);var 标记 = [];for (var i = 0; i < data.length; ++i) {//设置标记位置var latLng = new google.maps.LatLng(data[i].lat, data[i].lng);控制台日志(数据[i].lat)；//删除标记var 标记 = 新 MarkerWithLabel({位置:纬度，地图:地图，标签内容:数据[i].price，labelAnchor: 新的 google.maps.Point(27, 35),标题:数据[i].标题，labelClass:地图标记"，z索引:我//图标: ' '});标记.推(标记)；var infowindow = null;buildInfoWindow(marker,map,data[i], i);}var markerCluster = new MarkerClusterer(地图，标记)；google.maps.event.addListener(markerCluster, 'click', function() {infowindow.open(map,markerCluster);});}功能buildInfoWindow(标记，地图，数据，索引){var strVar="";strVar += "<img src=\""+data.main_photo+"\"><br>";strVar += data.name+"<\/i>&nbsp;|&nbsp;"+data.age+"&nbsp;<i class=\"fa fa-prp\"><\/i>&nbsp;|&nbsp;"+data.gender+"<i class=\"fa fa-check\"><\/i>";strVar += "
";strVar += "<a href=\""+data.link+"\"><img class=\"avatar-photo-list\" src=\""+data.picture+"\"><;\/a>";strVar += "<\/div>";strVar += "
"+data.city+"<\/div>";strVar += "<\/a>";var infowindow = new google.maps.InfoWindow({内容:strVar});google.maps.event.addListener(marker, 'click', function() {infowindow.open(地图，标记)；});}

我怎样才能做到这一点?

解决方案

我最终是这样解决这个问题的，添加如下代码:

var clusterOptions = {zoomOnClick: 假}标记簇=新的标记簇(地图，标记，簇选项)；google.maps.event.addListener(markerCluster, 'clusterclick', function(clu​​ster) {如果 (map.getZoom() < map.maxZoom ){map.setCenter(cluster.center_);map.setZoom(map.getZoom() + 2);} 别的 {var 内容 = '';//将坐标转换为 MVCObjectvar info = new google.maps.MVCObject;info.set('position', cluster.center_);//获取标记var mark_in_cluster = cluster.getMarkers();控制台日志(marks_in_cluster)；for (var z = 0; z 

I have a map with lots of markers. All these markers have a InfoWindow. With the Markers Cluster Lib, (http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js) I get clusters that zoom in when clicked.
Some Markers have the exact same coordinates, so they turn into a cluster even when I reach the maximum zoom. This is all fine so far, except that I want to also open a InfoWindow when clicking in the cluster that never splits into markers when zoomed. In this InfoWindow I want to display information based on the markers it includes.

This is my code so far. It works fine with InfoWindow on Markers, except it does not display InfoWindow when clicking on on Clusters.

function initialize(lat, lng) {
   var myLatlng = new google.maps.LatLng(lat,lng);
   var mapOptions = {
      mapTypeControl: false,
      center: myLatlng,
      zoom: 14,
      maxZonn:15
   };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    google.maps.event.addListener(map, 'idle', function() {
        getMarkers(map.getBounds());  

    });

};

function getMarkers(bounds){
    var filter = build_filter();
    var bounds  = {
        'swlat':bounds.getSouthWest().lat(),
        'swlng':bounds.getSouthWest().lng(),
        'nelat':bounds.getNorthEast().lat(),
        'nelng':bounds.getNorthEast().lng()
    };

    data = {
        'bounds': bounds
    }


 $.ajax({
    type: "POST",
    dataType: 'json',
    async: false,
    url: "<?=$x_url;?>",
    data: data,
    cache: true,
    success: function (json) {
        addMarkers2Map(json);

    }
    });
}    


function addMarkers2Map(data){

    $('#properties_counter').html(data.length);
    var markers = []; 
    for (var i = 0; i < data.length; ++i) {
        // set the marker position
        var latLng = new google.maps.LatLng(data[i].lat, data[i].lng);
        console.log(data[i].lat);


        // drop the marker
        var marker = new MarkerWithLabel({
            position: latLng,
            map: map,
            labelContent: data[i].price,
            labelAnchor: new google.maps.Point(27, 35),
            title: data[i].title,
            labelClass: "map-markers",
            zIndex: i
            // icon: ' '

        });

        markers.push(marker);

        var infowindow = null;
        buildInfoWindow(marker,map,data[i], i);

    }

    var markerCluster = new MarkerClusterer(map, markers);

    google.maps.event.addListener(markerCluster, 'click', function() {

            infowindow.open(map,markerCluster);

    });
}

function buildInfoWindow(marker, map, data, index){
    var strVar="";
    strVar += "<img src=\""+data.main_photo+"\"><br>";
    strVar += data.name+"<\/i>&nbsp;|&nbsp;"+data.age+"&nbsp;<i class=\"fa fa-prp\"><\/i>&nbsp;|&nbsp;"+data.gender+"&nbsp;<i class=\"fa fa-check\"><\/i>";
    strVar += "<div class=\"avatar-list\">";
    strVar += "<a href=\""+data.link+"\"><img class=\"avatar-photo-list\" src=\""+data.picture+"\"><\/a>";
    strVar += "<\/div>";
    strVar += "<div class=\"adress2\">"+data.city+"<\/div>";
    strVar += "<\/a>";

    var infowindow = new google.maps.InfoWindow({
        content: strVar
         });

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

How can I achieve this?

解决方案

I ended up solving this problem this way, adding the following code:

var clusterOptions = {
    zoomOnClick: false
}

markerCluster = new MarkerClusterer(map, markers, clusterOptions);

google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
if (map.getZoom() < map.maxZoom ){

    map.setCenter(cluster.center_);

    map.setZoom(map.getZoom() + 2);
} else {

    var content = '';
    // Convert the coordinates to an MVCObject
    var info = new google.maps.MVCObject;
    info.set('position', cluster.center_);
    //Get markers
    var marks_in_cluster = cluster.getMarkers();

    console.log(marks_in_cluster);

    for (var z = 0; z < marks_in_cluster.length; z++) {
        content = makeClusterInfo(marks_in_cluster,z); 
    }

    infowindow.close(); // closes previous open ifowindows
    infowindow.setContent(content); 
    infowindow.open(map, info);
    google.maps.event.addListener(map, 'zoom_changed', function() {
        infowindow.close()
    });
    } 
});

这篇关于集群上的 Google Maps InfoWindow的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！