Question

我修改了编码（见下文）来自定义我自己的标记。但是复选框不再起作用了。有谁能请帮我弄清楚是什么问题？我已经尝试了多次重新编码，但我仍然无法使复选框工作..

<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>

Answer 1

解决问题的一种方法是使用查询生成标记数组，然后使用setMap隐藏和显示它们

working example

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

1 个答案: