Пример кластера кластеров карт Google

Я работаю над поиском базового примера API-интерфейсов Marker Cluster API v3. Я прошел через пример here, но я не могу понять это правильно. Пожалуйста, помогите мне пример, чтобы построить кластер с этими данными:Пример кластера кластеров карт Google

var macDoList = [ 
    {lat:49.00408,lng:2.56228,data:{drive:false,zip:93290,city:"TREMBLAY-EN-FRANCE"}}, 
    {lat:49.00308,lng:2.56219,data:{drive:false,zip:93290,city:"TREMBLAY-EN-FRANCE"}}, 
    {lat:48.93675,lng:2.35237,data:{drive:false,zip:93200,city:"SAINT-DENIS"}}, 
    {lat:48.93168,lng:2.39858,data:{drive:true,zip:93120,city:"LA COURNEUVE"}}, 
    {lat:48.91304,lng:2.38027,data:{drive:true,zip:93300,city:"AUBERVILLIERS"}}, 
];

Код: сообщил

<!DOCTYPE> 
<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>MarkerClusterer v3 Example</title> 

    <style type="text/css"> 

     #map { 
     width: 600px; 
     height: 400px; 
     } 

    </style> 

    <script src="http://maps.google.com/maps/api/js?sensor=false"></script> 

    <script type="text/javascript"> 
     function initialize() { 
     var center = new google.maps.LatLng(37.4419, -122.1419); 

     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 3, 
      center: center, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 

     var markers = []; 

      var macDoList = [ 
     {lat:49.00408,lng:2.56228,data:{drive:false,zip:93290,city:"TREMBLAY-EN-FRANCE"}}, 
     {lat:49.00308,lng:2.56219,data:{drive:false,zip:93290,city:"TREMBLAY-EN-FRANCE"}}, 
     {lat:48.93675,lng:2.35237,data:{drive:false,zip:93200,city:"SAINT-DENIS"}}, 
      {lat:48.93168,lng:2.39858,data:{drive:true,zip:93120,city:"LA COURNEUVE"}}, 
      {lat:48.91304,lng:2.38027,data:{drive:true,zip:93300,city:"AUBERVILLIERS"}}, 
]; 

     for(var i=0;i<5;i++){ 
      console.log(macDoList[i].lat) 
      var latLng = new google.maps.LatLng(macDoList[i].lat, 
       macDoList[i].lng); 
      var marker = new google.maps.Marker({ 
      position: latLng 
      }); 
      markers.push(marker); 
     } 
     var markerCluster = new MarkerClusterer(map, markers); 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 

    <div id="map-container"><div id="map"></div></div> 
    </body> 
</html>

источник

2014-02-15 user3310021

Пожалуйста, покажите нам, что вы пробовали. –

Я haved добавил код выше – user3310021

В каком виде вы не можете «правильно это понять»? В чем проблема, которую вы наблюдаете? –

Существует одна ошибка:

Uncaught ReferenceError: MarkerClusterer is not defined

, потому что библиотека markerclusteres.js не входит. Вы должны сделать это как:

<script src='../../js/markerclusterer.js'></script>

Когда это исправить вы ничего не видите, потому что центр находится на США, все ваши данные для Франции.

Маркеры не видны, потому что для них не установлена карта. это должно быть сделано с использованием опциона map:

function initialize() { 
    //var center = new google.maps.LatLng(37.4419, -122.1419); 
    var center = new google.maps.LatLng(49, 2.56); 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 3, 
     center: center, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var markers = []; 

    var macDoList = [ 
     {lat:49.00408,lng:2.56228,data:{drive:false,zip:93290,city:"TREMBLAY-EN-FRANCE"}}, 
     {lat:49.00308,lng:2.56219,data:{drive:false,zip:93290,city:"TREMBLAY-EN-FRANCE"}}, 
     {lat:48.93675,lng:2.35237,data:{drive:false,zip:93200,city:"SAINT-DENIS"}}, 
     {lat:48.93168,lng:2.39858,data:{drive:true,zip:93120,city:"LA COURNEUVE"}}, 
     {lat:48.91304,lng:2.38027,data:{drive:true,zip:93300,city:"AUBERVILLIERS"}}, 
    ]; 

    for(var i=0;i<5;i++){ 
     console.log(macDoList[i].lat) 
     var latLng = new google.maps.LatLng(
          macDoList[i].lat, 
          macDoList[i].lng); 
     var marker = new google.maps.Marker({ 
      position: latLng, 
      map: map 
     }); 
     markers.push(marker); 
    } 

    var markerCluster = new MarkerClusterer(map, markers); 
}

источник

2014-02-15 07:43:36

У меня есть еще один вопрос! Если я добавлю еще один ключ в macDoList, например {lat: 49.00408, lng: 2.56228, data: {drive: false, zip: 93290, city: "TREMBLAY-EN-FRANCE"}, premium: "true"}. Как я дифференцирую кластер с разным цветом, который имеет маркер с ключевой премией: «правда»? – user3310021

Если я правильно помню, MarkerClusterer меняет цвет кластера на основе количества маркеров в кластере. Проверьте документы для цветовой схемы. Итак, ответ: вы не можете этого сделать. –

Но некоторые сайты, такие как zumper.com, используют это :(! Хорошо, есть ли способ найти, где маркер присутствует в кластере (предположим, если на карте видны два кластера, и у меня есть широта и долгота маркера) – user3310021

Пример кластера кластеров карт Google

ответ

Смежные вопросы