Добавление простого кластерного маркера на карту Google - PullRequest
Новая
       49

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

8 голосов
/ 10 марта 2011

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

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

Вот мой код (в основном из 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>

1 Ответ

14 голосов
/ 10 марта 2011

Вот рабочая jsfiddle demo

Как только вы создадите кластер маркеров, вы захотите добавить к нему маркеры.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);

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

UPDATE : для вашей функции 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;
}
...