Question

我正在尝试通过使用复选框来打开和关闭图层，但由于某种原因我错过了某些内容而无法让它再次点击和关闭。我还想为每个图层添加自定义标记，但根本没有成功完成。

这是我正在使用的代码。我很感激任何有关这方面的帮助我对使用此代码非常新。

var map;
    var layerl0;
    var layerl1;
    function initialize() {
      map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(62.683556,-152.314453),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
      layerl0 = new google.maps.FusionTablesLayer({
        query: {
          select: "'col0'",
          from: '1suBUHqahw5W9f6A6kEVhh-NWmqSbukYqdtnJLWs'
        },
        map: map,
        styleId: 2,
        templateId: 3
      });
      layerl1 = new google.maps.FusionTablesLayer({
        query: {
              select: "'col0'",
          from: '1ra3TP6cbWmdAOayLgzCugLrhdmDAO6UJIFuty9E'
        },
        map: map,
         styleId: 2,
         templateId: 3
      });
    }
    function changeMapl0() {
       var searchString = document.getElementById('search-string-l0').value.replace(/'/g, "\\'");
       layerl0.setOptions({
          query: {
           select: "'col0'",
           from: '1suBUHqahw5W9f6A6kEVhh-NWmqSbukYqdtnJLWs',
           where: "'category' = '" + searchString + "'"
        }
      });
    }
    function changeMapl1() {
       var searchString = document.getElementById('search-string-l1').value.replace(/'/g, "\\'");
       layerl1.setOptions({
         query: {
          select: "'col0'",
           from: '1ra3TP6cbWmdAOayLgzCugLrhdmDAO6UJIFuty9E',
           where: "'category' = '" + searchString + "'"
        }
      });
   }
    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
  </head>
  <body>
    <div id="map-canvas"></div>
    <div style="margin-top: 10px;">
      <form>
     <input type="checkbox" value="CRCD" checked="checked" id="search-string-l0" onClick="changeMapl0(this.value);">CRCD Learning Centers
       <input type="checkbox" value="Research" checked="checked" id="search-string-l1" onClick="changeMapl1(this.value);">Off-site Research
       </form>
    </div>

Answer 1

您的问题是您的changeMap函数实际上并没有根据复选框的值执行任何操作：

function changeMapl0() {
   var searchString = document.getElementById('search-string-l0').value.replace(/'/g, "\\'");
   layerl0.setOptions({
      query: {
       select: "'col0'",
       from: '1suBUHqahw5W9f6A6kEVhh-NWmqSbukYqdtnJLWs',
       where: "'category' = '" + searchString + "'"
    }
  });
}

请改为尝试：

    function changeMapl0() {
       if (document.getElementById('search-string-l0').checked )
       { layerl0.setMap(map); }
       else
       { layerl0.setMap(null); }
    }

Working example

融合表问题与onClick和自定义图标

1 个答案: