Добавление простого кластерного маркера на карту Google

Question

У меня проблемы с добавлением функциональных возможностей кластерного маркера на мою карту. То, что я хочу, это использовать пользовательский значок для моих маркеров, и каждый маркер имеет свое собственное информационное окно, которое я хочу иметь возможность редактировать.

Я сделал это, но теперь у меня есть проблемы с добавлением функциональных возможностей библиотеки маркера кластера. Я читал кое-что о добавлении маркеров в массив, но я не уверен, что это будет означать. Кроме того, все примеры с массивом, которые я нашел, не имеют информационных окон и поиска по коду, я не нашел подходящего способа их добавления.

Вот мой код (в основном от Geocodezip.com):

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
    <style type="text/css">
    html, body { height: 100%; } 
    </style>
<script type="text/javascript"> 
//<![CDATA[
var map = null;
function initialize() {
  var myOptions = {
    zoom: 8,
    center: new google.maps.LatLng(43.907787,-79.359741),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

var mcOptions = {gridSize: 50, maxZoom: 15};
var mc = new MarkerClusterer(map, [], mcOptions);

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

      // Add markers to the map
      // Set up three markers with info windows 

          var point = new google.maps.LatLng(43.65654,-79.90138); 
          var marker1 = createMarker(point,'Abc');

          var point = new google.maps.LatLng(43.91892,-78.89231);
          var marker2 = createMarker(point,'Abc');

          var point = new google.maps.LatLng(43.82589,-79.10040);
          var marker3 = createMarker(point,'Abc');

          var markerArray = new Array(marker1, marker2, marker3);
          mc.addMarkers(markerArray, true);


}

var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(150,50)
  });

function createMarker(latlng, html) {
    var image = '/321.png';
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: image,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

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

//]]>
</script> 

Answer 1

Вот рабочая демоверсия jsfiddle

Создав кластер маркеров, вы захотите добавить к нему маркеры. MarkerClusterer поддерживает добавление маркеров с помощью addMarker() а также addMarkers() метод или путем предоставления массива маркеров для конструктора:

Когда они говорят добавить маркер в конструктор, предоставив массив маркеров, это похоже на это:

var markers = [];  //create a global array where you store your markers
for (var i = 0; i < 100; i++) {
  var latLng = new google.maps.LatLng(data.photos[i].latitude,
      data.photos[i].longitude);
  var marker = new google.maps.Marker({'position': latLng});
  markers.push(marker);  //push individual marker onto global array
}
var markerCluster = new MarkerClusterer(map, markers);  //create clusterer and push the global array of markers into it.

Чтобы добавить его с помощью addMarker() вы в основном добавляете его в кластер следующим образом:

var markerCluster //cluster object created on global scope

//do your marker creation and add it like this:
markerCluster.addMarker(newMarker, true); //if specify true it'll redraw the map

или если вы хотите добавить массив:

var markerCLuster //cluster object created on global scope

//do your marker creation and push onto array of markers:
markerCluster.addMarkers(newMarkers, true); //if specify true it'll redraw the map

Вот ссылка на MarkerClusterer и простые примеры

Основываясь на фрагменте вашего кода, вы захотите сделать что-то вроде этого:

    var mcOptions = {gridSize: 50, maxZoom: 15};
     var mc = new MarkerClusterer(map, [], mcOptions);

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

      // Add markers to the map
      // Set up three markers with info windows 

          var point = new google.maps.LatLng(43.65654,-79.90138); 
          var marker1 = createMarker(point,'Abc');

          var point = new google.maps.LatLng(43.91892,-78.89231);
          var marker2 = createMarker(point,'Abc');

          var point = new google.maps.LatLng(43.82589,-79.10040);
          var marker3 = createMarker(point,'Abc');

          var markerArray = new Array(marker1, marker2, marker3);
          mc.addMarkers(markerArray, true);

Вы неправильно создаете своих создателей, называя все свои маркеры одним и тем же marker таким образом, вы на самом деле создаете три маркера, и они записываются заново, когда вы каждый раз сохраняете их в маркере var. Итак, я продолжил и переименовал ваши маркеры. Затем я создал массив для их хранения и передачи в MarkerClusterer.

ОБНОВЛЕНИЕ: к вашему createMarker функция, вы не вернули маркер, а затем нет маркера для кластеризации:

function createMarker(latlng, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat() * -100000) << 5
    });

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

    return marker;
}