MarkerClustererPlusと入れ子になったクラスター

Question

私は、あるエリアに送受信エリア（パイロン）を数多く（たとえば5個）、無線で接続している顧客を200人（40人）それぞれ平均して）。

私は最初にそのエリアに番号5（ステーションの数）を表示するアイコンを表示し、次にこのアイコンのクリックイベントでこれら5つのパイロンアイコンを表示し、その後それらのいずれかのアイコンすべての顧客のアイコン（クリックしたパイロンに接続している顧客のみ）が表示されます。

私の国の多くの地域でこれがすべてです。問題は、タスクを達成するために実装すべき基本的なステップは何か？私が現時点で行ってきたことは、単にそれらの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とは異なるステーションイメージとして使用します。