MarkerClustererPlus и вложенные кластеры

Question

Я хочу сказать следующее: предположим, что у вас есть в определенной области несколько передающих прием станций (пилонов) (например, 5) и двухсот клиентов, подключенных к ним по беспроводной сети (40 каждому в среднем).

Я хочу, чтобы в этой области появлялась иконка, показывающая число 5 (количество станций), а затем на событие клика на этом значке. Я хочу, чтобы эти 5 значков пилонов отображались, а затем на событие click на любом из этих значков все значки клиентов (только клиенты, подключенные к щелканному пилуну).

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

Должен ли я теперь определять новые кластеры, по одному для каждой станции, каждый из которых содержит клиентов, подключенных к нему? Или я должен взять подход «снизу вверх», я имею в виду, определить один большой кластер клиентов, а затем двигаться дальше? В таком случае, как я должен действовать?

Я новичок в HTML и Javascript (и мне 66 !!!), тем не менее я пытаюсь выполнить задачу, используя эти языки и библиотеку MarkerClusterePlus. Мне нужны предложения, пожалуйста. Спасибо всем.

Answer 1

спасибо за ответ. Я сделал только несколько модификаций кода примера, предоставленного библиотекой, как HTML, так и JS.

HTML

<script type="text/javascript" src="oNet.js"></script> 

<script type="text/javascript">  
    google.maps.event.addDomListener(window, 'load', oNet.init); 
</script> 

<div> 
    Markers: 
    <select id="nummarkers"> 
     <option value="6" selected="selected">6</option> 
    </select> 
    </div> 

    <strong>Tralicci Bari</strong> 
    <div id="markerlist"> 

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

JS

function $(element) { 
return document.getElementById(element); 
} 

var oNet = {}; 
oNet.tralicci = null; 
oNet.map = null; 
oNet.markerClusterer = null; 
oNet.markers = []; 
oNet.infoWindow = null; 

oNet.init = function() { 
    var latlng = new google.maps.LatLng(41, 16.38); 
    var options = { 
    'zoom': 6, 
    'center': latlng, 
    'mapTypeId': google.maps.MapTypeId.ROADMAP 
}; 
oNet.map = new google.maps.Map($('map'), options); 
oNet.tralicci = data.tralicci; 

var numMarkers = document.getElementById('nummarkers'); 
google.maps.event.addDomListener(numMarkers, 'change', oNet.change); 
oNet.infoWindow = new google.maps.InfoWindow(); 
oNet.showMarkers(); 
}; 

Пожалуйста, обратите внимание, что здесь появляется как "он" является "SpeedTest" в распределенном примере коде, и «tralicci «эквивалентно« станциям ».

Data_BA.json

var data = { 
"tralicci": 
[ 
    {"trl_id": "BA_01", "trl_nome": "1o traliccio", "longitude": 16.58, "latitude": 41.09, 
      "title": "Traliccio n. 1\nPotenza 15 KW\nAltezza 37.5 m\nClienti connessi: 40", 
      "stato": "on", "altezza": 375} 
    , 
    {"trl_id": "BA_02", "trl_nome": "2o traliccio", "longitude": 16.578, "latitude": 41.112, 
      "title": "Traliccio n. 2\nPotenza 18 KW\nAltezza 42.5 m\nClienti connessi: 42", 
      "stato": "on", "altezza": 350} 
    , 
    {"trl_id": "BA_03", "trl_nome": "3o traliccio", "longitude": 16.544, "latitude": 41.09, 
      "title": "Traliccio n. 3\nPotenza 12 KW\nAltezza 22 m\nClienti connessi: 34", 
      "stato": "off", "altezza": 474} 
    , 
    {"trl_id": "BA_04", "trl_nome": "4o traliccio", "longitude": 16.556, "latitude": 41.08, 
      "title": "Traliccio n. 4\nPotenza 16 KW\nAltezza 35 m\nClienti connessi: 47", 
      "stato": "on", "altezza": 375} 
    , 
    {"trl_id": "BA_05", "trl_nome": "5o traliccio", "longitude": 16.580, "latitude": 41.085, 
      "title": "Traliccio n. 5\nPotenza 20 KW\nAltezza 39 m\nClienti connessi: 42", 
      "stato": "on", "altezza": 375} 
    , 
    {"trl_id": "BA_06", "trl_nome": "6o traliccio", "longitude": 16.790, "latitude": 41.12, 
    "title": "Traliccio n. 6\nPotenza 15 KW\nAltezza 32 m\nClienti connessi: 54", 
      "stato": "on-off", "altezza": 333} 

Я сделал очень мало, как вы можете видеть. Я использую свое изображение как изображение станции, отличное от распределенного m2.png.