MarkerClustererPlus 和嵌套集群

Question

我的意思是：假设您在某个区域有许多发射-接收站（塔）（例如 5 个），并且有 200 个客户无线连接到它们（平均每个 40 个）。

我希望首先在该区域出现一个图标，显示数字 5（站数），然后在该图标上的单击事件中，我希望出现这 5 个塔图标，然后在任何这些图标上的单击事件中全部显示客户图标（仅连接到点击的 pylon 的客户）出现。

这一切都适用于我国的许多地区。问题是：我应该执行哪些基本步骤来完成任务？我现在所做的只是定义这 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();
};

请注意这里显示的“oNet”是分布式示例代码中的“speedTest”，“tralicci”相当于“stations”。

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 不同。