我修改了编码(见下文)来定制我自己的标记。但是复选框不再起作用。谁能帮我找出问题所在?我已经尝试过多次重新编码,但我仍然无法使复选框工作..
<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>