3

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

2 に答える 2

6

re 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

コールバックでcenterをcluster.getCenter（）に設定したinfoWidowを表示するだけで、すべて設定されます。

re2：アイコンを変更してこのサンプルをチェックしてください：http：//google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/examples/advanced_example.html

HTH

于 2012-11-04T08:31:50.530 に答える
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/を参照してください。

于 2013-12-19T16:27:53.913 に答える