强制信息窗口而不是缩放单击并更改图标

时间:2012-11-03 21:51:14

标签: google-maps markerclusterer

我正在使用MarkerClusterer对标记进行分组,我有两个问题:

  1. 如何防止点击缩放并显示信息 窗口,就像你点击标记一样?
  2. 有没有办法更改群集的图标 标记?我不想将类似地震的图标用作我的标记的组图标。
  3. 提前致谢。

    修改

    var marker;
    var gm_map;
    var markerArray = [];
    var address = 'Sweden';
    var geocoder = new google.maps.Geocoder();
    
    geocoder.geocode({ 'address': address }, function(results, status) {
        if(status == google.maps.GeocoderStatus.OK) {
            gm_map.setCenter(results[0].geometry.location);
            gm_map.fitBounds(results[0].geometry.bounds);
        } else {
            alert("Kunde inte genomföra den geologiska inställningen på grund av följande fel:\n\n" + status);
        }
    });
    
    
    
    function initialize() {
        var marker, i;
    
        var locations = [["content", 59.328626, 13.485686, 1]];
    
    
        var options_googlemaps = {
            minZoom: 4,
            maxZoom: 18,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            streetViewControl: false
        }
    
        gm_map = new google.maps.Map(document.getElementById('google-maps'), options_googlemaps);
    
    
        var options_markerclusterer = {
            gridSize: 20,
            maxZoom: 18
        };
    
        var markerCluster = new MarkerClusterer(gm_map, [], options_markerclusterer, {zoomOnClick: false});
        google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
            alert('center of cluster: '+cluster.getCenter());
        });
    
    
    
        for(i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: gm_map
            });
    
            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    $('#toggle-photolist').fadeIn();
                    $('#close-overlay').fadeIn();
                    $('#list-photos').html(locations[i][0]);
                }
            })(marker, i));
    
            markerArray.push(marker);
            markerCluster.addMarkers(markerArray, true);
        }
    }
    
    
    
    $(document).ready(function() {
    
        // INITIERA GOOGLE MAPS
        initialize();
    
    });
    

    工作zoomOnClick

    var options_markerclusterer = {
        gridSize: 20,
        maxZoom: 18,
        zoomOnClick: false
    };
    
    var markerCluster = new MarkerClusterer(gm_map, [], options_markerclusterer);
    

2 个答案:

答案 0 :(得分:6)

重新1:

var markerCluster = new MarkerClusterer(map, markers ,{zoomOnClick: false});
google.maps.event.addListener(markerCluster,'clusterclick', 
    function(cluster){
      alert('center of cluster: '+cluster.getCenter())
    });

可以在此处找到群集的详细信息(可以从中获取哪些信息): https://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/markerclusterer/src/markerclusterer.js#801

您可以在回调中显示一个中心设置为cluster.getCenter()的infoWidow,您将全部设置。

re2:使用更改的图标查看此示例:http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/examples/advanced_example.html

HTH

答案 1 :(得分:0)

你可以在信息窗口试试这个,它对我来说非常好! :)

    //MarkerCluster!!!
    var markerCluster = new MarkerClusterer(map, my_markers ,{zoomOnClick: false});
    google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
        var content = '';
        // Convert lat/long from cluster object to a usable MVCObject
        var info = new google.maps.MVCObject;
        info.set('position', cluster.center_);
        iw.close();
        iw.setContent('<h1>Hi this is my Info Window</h1>');
        iw.open(map, info);
    });

这里的工作示例: 见http://krisarnold.com/2010/10/15/adding-info-windows-to-map-clusters-with-google-maps-api-v3/