Google地图信息窗口在群集上 [英] Google Maps InfoWindow on Clusters

问题描述

我有一张有很多标记的地图。所有这些标记都有一个InfoWindow。
使用Markers集群库（ http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js ）我获得了点击时放大的群集。

某些标记具有完全相同的坐标，所以即使达到最大变焦时它们也会变成一个簇。到目前为止，这一切都很好，除了我想在打开一个InfoWindow时单击群集时缩放时从不分割成标记。在这个InfoWindow中，我想根据它包含的标记显示信息。

到目前为止，这是我的代码。它在InfoMark上可以正常工作，但在点击群集时不会显示InfoWindow。

 函数初始化（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，
缓存：true，
成功：函数（json）{
 addMarkers2Map（json）; 
 
 
}）; 
 
 
 
函数addMarkers2Map（data）{
 
 $（'＃properties_counter'）。html（data.length）; 
 var markers = []; 
 for（var i = 0; i< data.length; ++ i）{
 //设置标记位置
 var latLng = new google.maps.LatLng（data [i ] .lat，data [i] .lng）; 
 console.log（data [i] .lat）; 
 
 
 //放下标记
 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）; 
 
}）; 
} 
 
函数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\\ & 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）; 
}）; 
} 
  

我该如何做到这一点？

解决方案

我最终以这种方式解决了这个问题，添加了以下代码：

  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 =''; 
 //将坐标转换为MVCObject 
 var info = new google.maps.MVCObject; 
 info.set（'position'，cluster.center_）; 
 //获取标记
 var marks_in_cluster = cluster.getMarkers（）; 
 
 console.log（marks_in_cluster）; 
 
（var z = 0; z< ; marks_in_cluster.length; z ++）{
 content = makeClusterInfo（marks_in_cluster，z）; 
} 
 
 infowindow.close（）; //关闭前面打开的ifowindows 
 infowindow.setContent（content）; 
 infowindow.open（map，info）; 
 google.maps.event.addListener（map，'zoom_changed'，function（）{
 infowindow.close ）
}）; 
} 
}）; 
  

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地图信息窗口在群集上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！