0

トグルをレイヤーで動作させるのに苦労しています。この質問が以前に尋ねられたことを知っており、回答を読みました。Kathryn の toggle_layer.html コードを使用しようとしましたが、動作しません。

「関数 changeMap」コード (下の太字) と IF ステートメント コードを追加すると、マップが削除されます。

これが私のコードです：

<!DOCTYPE html>
<html>
  <head>
  <style>
    #map-canvas { width:500px; height:400px; }
    .layer-wizard-search-label { font-family: sans-serif };
  </style>
  <script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
  </script>
  <script type="text/javascript">
    var map;
    var layer_0;
    var layer_1;
    function initialize() {
      map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(-23.002644973802262, 135.7124635),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
      layer_0 = new google.maps.FusionTablesLayer({
        query: {
          select: "col2>>1",
          from: "1HpTDVhKXNMEs59ins5DfwbaEOpRevJ79yEuKSYw"
        },
        map: map,
        styleId: 2,
        templateId: 2
      });
      layer_1 = new google.maps.FusionTablesLayer({
        query: {
          select: "col2>>1",
          from: "1HpTDVhKXNMEs59ins5DfwbaEOpRevJ79yEuKSYw"
        },
        map: map,
        styleId: 3,
        templateId: 4
      });
    }
    google.maps.event.addDomListener(window, 'load', initialize);

function changeMap(layerNum) {
  if (layerNum == 2) {
    update(layer_0);
  }
  if (layerNum == 3) {
    update(layer_1);
  }
}

function update(layer) {
  var layerMap = layer.getMap();
  if (layerMap) {
    layer.setMap(null);
  } else {
    layer.setMap(map);
  }
}

</script>


</head>
<body onload="initialize();">

<input type="checkbox" value="2" onclick="changeMap(this.value)" checked="checked" />Layer 1
<input type="checkbox" value="3" onclick="changeMap(this.value)" checked="checked" />Layer 2
<div id="map_canvas"></div>

</body>
</html>
4

1 に答える 1

0

css と html に一貫性がありません。私が変更した場合：

<div id="map_canvas"></div>

に：

<div id="map-canvas"></div>

マップが表示され、トグルが機能します。実施例

(または、css を修正するか、css をインラインに配置することもできます)

于 2013-07-15T15:21:38.750 に答える