【问题标题】:Force an information window instead of zoom on click and change the icon强制信息窗口而不是放大单击并更改图标
【发布时间】:2012-11-03 21:51:13
【问题描述】:

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

  1. 我应该怎么做才能防止点击放大并显示信息 窗口,例如单击标记时?
  2. 有什么办法可以改变集群的图标 标记?我不想将类似地震的图标用作标记的组图标。

提前致谢。

编辑

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

【问题讨论】:

    标签: google-maps markerclusterer


    【解决方案1】:

    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

    【讨论】:

    • 谢谢,但我应该如何使用isZoomOnClickisZoomOnClick(false) 刚测试的时候不行
    • 真的。我查看了实现并制作了一个示例,将修复回复。
    • 非常感谢!您的演示按我希望的那样工作,但是当我使用相同的代码时,它既显示警报又缩放地图。请在我的问题中查看我的编辑以获取完整代码。
    • 没关系!我得到了它的工作^^我用jQuery中的显示/隐藏函数替换了警报,它现在和你的演示一样好:)你对我的第二个问题的回答是我想要的。非常感谢您的帮助! :)
    • 很抱歉,我让它工作了,因为我在代码中有一个错误,这个错误迫使它不能继续缩放。我有同样的问题,就像我在你的最后一条评论之后的第一条评论中所写的一样。怎么了?
    【解决方案2】:

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

        //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/

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2020-11-30
      • 2012-05-25
      • 2017-11-15
      • 2014-04-18
      • 2013-11-19
      • 2011-10-07
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多