开启/关闭带复选框的自定义标记

我修改了编码（请参阅下文）以自定义我自己的标记。但复选框不起作用了。任何人都可以请帮我弄清楚是什么问题？我试图重新编码几次，但我仍然不能使复选框工作..开启/关闭带复选框的自定义标记

<body> 
<div id="map-canvas"></div> 
       <img src='https://lh6.googleusercontent.com/-rk8_2yBXUUg/T-FbxjCq4WI/AAAAAAAAAGo/UIMF525RtLY/s37/ramp.png'/><input type="checkbox" value="4596492" id="markers_ramp" onclick="changeLayer(this.value);"/> Ramps<br/> 
       <img src='https://lh6.googleusercontent.com/-iiPL-RHuq-I/T-FeawdppiI/AAAAAAAAAHY/G--PHmgTbQs/s37/stair.png'/><input type="checkbox" value="4597805" id="markers_stairway" onclick="changeLayer(this.value);"/> Stairways<br/>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>  
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 

    google.load('visualization', '1'); 

    function initialize() 
    { 
     var infoWindow = new google.maps.InfoWindow(); 
     var map = new google.maps.Map(document.getElementById('map-canvas'), { 
      center: new google.maps.LatLng(1.36940, 103.84856), 
      zoom: 14, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 


     // RAMP markers query 
     var ramp_query = "SELECT 'Type', Coordinates, Waypoints FROM 4597805"; 
     ramp_query = encodeURIComponent(ramp_query); 

     var gvizQuery_ramp = new google.visualization.Query(
      'http://www.google.com/fusiontables/gvizdata?tq=' + ramp_query); 

     var create_rampMarker = function(ramp_coordinate, type) 
     { 
      var marker = new google.maps.Marker({ 
       map: map, 
       position: ramp_coordinate, 
       icon: new google.maps.MarkerImage('https://lh6.googleusercontent.com/-rk8_2yBXUUg/T-FbxjCq4WI/AAAAAAAAAGo/UIMF525RtLY/s37/ramp.png') 
      }); 
      google.maps.event.addListener(marker, 'click', function(event) { 
      infoWindow.setPosition(ramp_coordinate); 
      infoWindow.setContent('<b>Type: </b>'+ type); 
      infoWindow.open(map); 
      }); 
     };   

     gvizQuery_ramp.send(function(response) 
     { 
      var numRows = response.getDataTable().getNumberOfRows(); 

      // For each row in the table, create a marker 
      for (var i = 0; i < numRows; i++) { 
       var stringCoordinates = response.getDataTable().getValue(i, 1); 
       var splitCoordinates = stringCoordinates.split(','); 
       var lat = splitCoordinates[0]; 
       var lng = splitCoordinates[1]; 
       var ramp_coordinate = new google.maps.LatLng(lat, lng); 
       var type = response.getDataTable().getValue(i, 0); 

       create_rampMarker(ramp_coordinate, type); 
      } 
     }); 


     // STAIRWAY markers query 
     var stairway_query = "SELECT 'Type', Coordinates FROM 4596492"; 
     stairway_query = encodeURIComponent(stairway_query); 

     var gvizQuery_stairway = new google.visualization.Query(
      'http://www.google.com/fusiontables/gvizdata?tq=' + stairway_query); 

     var create_stairwayMarker = function(stairway_coordinate, type) 
     { 
      var marker = new google.maps.Marker({ 
       map: map, 
       position: stairway_coordinate, 
       icon: new google.maps.MarkerImage('https://lh6.googleusercontent.com/-iiPL-RHuq-I/T-FeawdppiI/AAAAAAAAAHY/G--PHmgTbQs/s37/stair.png') 
      }); 
      google.maps.event.addListener(marker, 'click', function(event) { 
       infoWindow.setPosition(stairway_coordinate); 
       infoWindow.setContent('<b>Type: </b>'+ type); 
       infoWindow.open(map); 
      }); 
     };   

     gvizQuery_stairway.send(function(response) 
     { 
      var numRows = response.getDataTable().getNumberOfRows(); 

      // For each row in the table, create a marker 
      for (var i = 0; i < numRows; i++) { 
       var stringCoordinates = response.getDataTable().getValue(i, 1); 
       var splitCoordinates = stringCoordinates.split(','); 
       var lat = splitCoordinates[0]; 
       var lng = splitCoordinates[1]; 
       var stairway_coordinate = new google.maps.LatLng(lat, lng); 
       var type = response.getDataTable().getValue(i, 0); 

       create_stairwayMarker(stairway_coordinate, type); 
      } 
     }); 

    } // function initialize 

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


    function changeLayer(tableidselections) 
    { 
     if (tableidselections == 4596492) { 
      if (document.getElementById("markers_ramp").checked == true) { 
       stairway_query.setMap(map); 
      } 
      if (document.getElementById("markers_ramp").checked == false) { 
       stairway_query.setMap(null); /*layersetoff*/ 
      } 
     } 

     if (tableidselections == 4597805) { 
      if (document.getElementById("markers_stairway").checked == true) { 
       stairway_query.setMap(map); 
      } 
      if (document.getElementById("markers_stairway").checked == false) { 
       stairway_query.setMap(null); /*layersetoff*/ 
      } 
     } 

    } // function changelayer 

</script>

来源

2012-07-21 user1542445

你不能得到该代码明显JavaScript错误做什么？ – geocodezip 2012-07-21 12:10:40

没有。就我所知，没有任何错误。 – user1542445 2012-07-22 08:14:47

我得到的第一个错误是ramp_query，stairway_query没有setMap方法（因为它们在HTML click事件运行的全局上下文中为空）。我认为这是一个明显的javascript错误，因为它解释了为什么复选框不起作用。 – geocodezip 2012-07-22 11:01:57

一种方法来解决这个问题是使用查询，使标记的阵列，然后隐藏并告诉他们使用的setMap

working example

来源

2012-07-23 09:02:13 geocodezip

好吧，我现在得到它。谢谢你的样品！欣赏它！ – user1542445 2012-07-23 12:00:58

回答

相关问题