Question

我一直在阅读各种帖子，并一直试图让复选框来控制我的标记（开/关），但无济于事。下面的代码是我迄今为止所管理的，但遗憾的是它仍然无效。

非常感谢任何想法/帮助。

让它与xml一起使用，但我想使用js/json个文件

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>    
<script type="text/javascript">
var json = [{
        "Name" : "NER 1",
        "Latitude" : 51.50732,
        "Longitude" : -0.128673,
        "Connect" : "BS123",
        "ChargeR" : "Standard",
        "ConType" : 1,
        "Operator" : "NER",
    },{
        "Name" : "NER 2",
        "Latitude" : 51.506906,
        "Longitude" : -0.126548,
        "Connect" : "BS234",
        "ChargeR" : "Standard",
        "ConType" : 2,
        "Operator" : "NER",
    },{
        "Name" : "SEW 3",
        "Latitude" : 51.508382,
        "Longitude" : -0.129724,
        "Connect" : "BS345",
        "ChargeR" : "Standard",
        "ConType" : 3,
        "Operator" : "SEW",
    },{
        "Name" : "SEW 1",
        "Latitude" : 51.508322,
        "Longitude" : -0.126902,
        "Connect" : "BS123",
        "ChargeR" : "Standard",
        "ConType" : 4,
        "Operator" : "SEW",
    },{
        "Name" : "TAW 2",
        "Latitude" : 51.507841,
        "Longitude" : -0.126066,
        "Connect" : "BS234",
        "ChargeR" : "Standard",
        "ConType" : 2,
        "Operator" : "TAW",
    },{
        "Name" : "TAW 3",
        "Latitude" : 51.50746,
        "Longitude" : -0.12759,
        "Connect" : "BS345",
        "ChargeR" : "Standard",
        "ConType" : 3,
        "Operator" : "TAW",
    },{
        "Name" : "RCR 1",
        "Latitude" : 51.506439,
        "Longitude" : -0.127922,
        "Connect" : "BS234",
        "ChargeR" : "Standard",
        "ConType" : 4,
        "Operator" : "NER",
    },{
        "Name" : "RCR 2",
        "Latitude" : 51.50943,
        "Longitude" : -0.127428,
        "Connect" : "BS234",
        "ChargeR" : "Standard",
        "ConType" : 2,
        "Operator" : "NER",
    }
]
// JavaScript Document
function initialize() {
    var latlng = new google.maps.LatLng(51.508075,-0.127873);
    var myOptions = {
        zoom: 17,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true,
    };
    var map = new google.maps.Map(document.getElementById("map"),myOptions);    


        var markers = [];
        var categoryIcons = {}
        for (var i = 0; i < json.length; i++) {
          var data = json[i],
            latLng = new google.maps.LatLng(data.Latitude, data.Longitude);
          var marker = new google.maps.Marker({
            position: latLng,
            map : map,
            title : data.Name,
            icon : categoryIcons[data.ConType],
          });    
          // === Store the category and name info as a marker properties ===
          marker.mycategory = data.ConType;
          marker.myname = data.Name;
          marker.myoperator = data.Operator,              
           markers.push(marker);
           // end Looping through the JSON data
           <!-- Map traffic begin -->       
          (function (marker, data) {
                // Attaching a click event to the current marker
                google.maps.event.addListener(marker, 'click', function(e) {}); // end Attaching a click event to the current marker    
            })(marker, data); // end Creating a closure 

            // == shows all markers of a particular category, and ensures the checkbox is checked ==
      function show(category) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == category) {
            gmarkers[i].setVisible(true);
          }
        }
        // == check the checkbox ==
        document.getElementById(category+"box").checked = true;
      }

      // == hides all markers of a particular category, and ensures the checkbox is cleared ==
      function hide(category) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == category) {
            gmarkers[i].setVisible(false);
          }
        }
        // == clear the checkbox ==
        document.getElementById(category+"box").checked = false;
        // == close the info window, in case its open on a marker that we just hid
        infoBubble.close();
      }

      // == a checkbox has been clicked ==
      function boxclick(box,category) {
        if (box.checked) {
          show(category);
        } else {
          hide(category);
        }
        // == rebuild the side bar
        makeSidebar();
      }

      function myclick(i) {
        google.maps.event.trigger(gmarkers[i],"click");
      } 

        }   
        }
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onLoad="initialize()">
<div id="map" style="margin-top: 10px; margin-left: auto; margin-right: auto; width: 1000px; height: 650px;"></div>
<div style="margin-top: 10px; margin-left: auto; margin-right: auto; width: 1000px; height: 650px;">
    <input type="checkbox" id="1" class="cas" name="1" value="1" onclick="boxclick(this,'1')" checked/>1<br>
    <input type="checkbox" id="2" class="cas" name="2" value="2" onclick="boxclick(this,'2')" checked/>2<br>
    <input type="checkbox" id="3" class="cas" name="3" value="3" onclick="boxclick(this,'3')" checked/>3<br>
    <input type="checkbox" id="4" class="cas" name="4" value="4" onclick="boxclick(this,'4')" checked/>4
    </div>

干杯

Answer 1

所有函数都是初始化函数的本地函数。要从HTML单击事件中使用，它们必须位于全局范围内。 gmarkers数组未定义。

var gmarkers = [];
function initialize() {
    var latlng = new google.maps.LatLng(51.508075,-0.127873);
    var myOptions = {
        zoom: 17,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true,
    };
    var map = new google.maps.Map(document.getElementById("map"),myOptions);


    var categoryIcons = {}
    for (var i = 0; i < json.length; i++) {
      var data = json[i],
      latLng = new google.maps.LatLng(data.Latitude, data.Longitude);
      var marker = new google.maps.Marker({
            position: latLng,
            map : map,
            title : data.Name,
            icon : categoryIcons[data.ConType],
      });
      // === Store the category and name info as a marker properties ===
      marker.mycategory = data.ConType;
      marker.myname = data.Name;
      marker.myoperator = data.Operator,
      gmarkers.push(marker);
      // end Looping through the JSON data
      <!-- Map traffic begin -->
      (function (marker, data) {
          // Attaching a click event to the current marker
          google.maps.event.addListener(marker, 'click', function(e) {}); // end Attaching a click event to the current marker
          })(marker, data); // end Creating a closure

      }
} // end of initialize function

// == shows all markers of a particular category, and ensures the checkbox is checked ==
function show(category) {
  for (var i=0; i<gmarkers.length; i++) {
    if (gmarkers[i].mycategory == category) {
      gmarkers[i].setVisible(true);
    }
  }
  // == check the checkbox ==
  document.getElementById(category+"box").checked = true;
}

// == hides all markers of a particular category, and ensures the checkbox is cleared ==
function hide(category) {
  for (var i=0; i<gmarkers.length; i++) {
    if (gmarkers[i].mycategory == category) {
      gmarkers[i].setVisible(false);
    }
  }
  // == clear the checkbox ==
  document.getElementById(category+"box").checked = false;
  // == close the info window, in case its open on a marker that we just hid
  infoBubble.close();
}

// == a checkbox has been clicked ==
function boxclick(box,category) {
  if (box.checked) {
    show(category);
  } else {
    hide(category);
  }
  // == rebuild the side bar
  makeSidebar();
}

function myclick(i) {
  google.maps.event.trigger(gmarkers[i],"click");
}

google.maps.event.addDomListener(window, 'load', initialize);

无法获得复选框工作

1 个答案: