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();
};

请注意，此处显示为＆＃34; oNet＆＃34;是＆＃34; speedTest＆＃34;在分布式示例代码中，＆＃34; tralicci＆＃34;相当于＆＃34; station＆＃34;。

<强> 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。

MarkerClustererPlus和嵌套集群

1 个答案: