Question

以下是演示jsfiddle

正如您所看到的，Google地图上的复选框未被选中。我想在页面加载时检查它们并显示所有标记。

这是我的代码

    var map;
var var_location = new google.maps.LatLng(45.430817, 12.331516);

function map_init() {

    var var_mapoptions = {
        center: {lat:45,lng:-23},
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        panControl: false,
        rotateControl: false,
        streetViewControl: false,
        scrollwheel: false,
    };
    map = new google.maps.Map(document.getElementById("map"),
    var_mapoptions);
    var contentString =
        '<div id="mapInfo">' +
        '<p><strong>Peggy Guggenheim Collection</strong><br>' +
        'Dorsoduro, 701-704<br>' +
        '30123, Venezia<br>' +
        'P: (+39) 041 240 5411</p>' +
        '</div>';

    var var_infowindow = new google.maps.InfoWindow({
        content: contentString
    });
    var var_marker = new google.maps.Marker({
        position: var_location,
        map: map,
        icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
        title: "Click for information about the Guggenheim museum in Venice",
        maxWidth: 200,
        maxHeight: 200
    });

    google.maps.event.addListener(var_marker, 'click', function () {
        var_infowindow.open(map, var_marker);
    });
//use the buttons-div as map-control 
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(ctrl[0]);

}

var places = {
    restaurant: {
        label: 'restaurants',
        //the category may be default-checked when you want to
        //uncomment the next line
        //checked:true,
        icon: 'https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png',
        items: [
            ['Melt Bar and Grill', 41.485345, -81.799047],
            ['Sloane Pub', 41.486182, -81.824178],
            ['Spitfire Salon', 41.479670, -81.768430],
            ['Mahall\'s', 41.476989, -81.781094],
            ['Szechwan Garden', 41.485615, -81.787890]
        ]
    },
    park: {
        label: 'parks',
        //the category may be default-checked when you want to
        //uncomment the next line
        //checked:true,
        icon: 'https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png',
        items: [
            ['Lakewood Park', 41.494457, -81.797605],
            ['Madison Park', 41.476969, -81.781929],
            ['Tuland Park', 41.464052, -81.788041]
        ]
    }
},

infowindow = new google.maps.InfoWindow(),

// a  div where we will place the buttons
ctrl = $('<div/>').css({
    background: '#fff',
    border: '1px solid #000',
    padding: '4px',
    margin: '2px',
    textAlign: 'center'
});
//show all-button
ctrl.append($('<input>', {
    type: 'button',
    value: 'show all'
})
    .click(function () {
    $(this).parent().find('input[type="checkbox"]')
        .prop('checked', true).trigger('change');
}));
ctrl.append($('<br/>'));

//clear all-button
ctrl.append($('<input>', {
    type: 'button',
    value: 'clear all'
})
    .click(function () {
    $(this).parent().find('input[type="checkbox"]')
        .prop('checked', false).trigger('change');
}));
ctrl.append($('<hr/>'));

//now loop over the categories
$.each(places, function (c, category) {

//a checkbox fo the category
var cat = $('<input>', {
    type: 'checkbox'
}).change(function () {
    $(this).data('goo').set('map', (this.checked) ? map : null);
})
//create a data-property with a google.maps.MVCObject
//this MVC-object will do all the show/hide for the category 
.data('goo', new google.maps.MVCObject)
    .prop('checked', !! category.checked)

//this will initialize the map-property of the MVCObject
.trigger('change')

//label for the checkbox
.appendTo($('<div/>').css({
    whiteSpace: 'nowrap',
    textAlign: 'left'
})
    .appendTo(ctrl))
    .after(category.label);

    //loop over the items(markers)
    $.each(category.items, function (m, item) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(item[1], item[2]),
            title: item[0],
            icon: category.icon
        });

        //bind the map-property of the marker to the map-property
        //of the MVCObject that has been stored as checkbox-data 
        marker.bindTo('map', cat.data('goo'), 'map');
        google.maps.event.addListener(marker, 'click', function () {
            infowindow.setContent(item[0]);
            infowindow.open(map, this);
        });
    });
});

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

我已经尝试过了

.prop('checked', ture)

而不是

.prop('checked', !! category.checked)

但它不起作用。

提前感谢您的帮助

Answer 1

最后创建“全部显示”按钮，然后您只需触发点击此按钮：

function map_init() {

    var var_mapoptions = {
        center: new google.maps.LatLng(41.478189, -81.798588),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        panControl: false,
        rotateControl: false,
        streetViewControl: false
    };
    map = new google.maps.Map(document.getElementById("map"),
    var_mapoptions);
    var contentString =
        '<div id="mapInfo">' +
        '<p><strong>Peggy Guggenheim Collection</strong><br>' +
        'Dorsoduro, 701-704<br>' +
        '30123, Venezia<br>' +
        'P: (+39) 041 240 5411</p>' +
        '</div>';

    var var_infowindow = new google.maps.InfoWindow({
        content: contentString
    });
    var var_marker = new google.maps.Marker({
        position: new google.maps.LatLng(45.430817, 12.331516),
        map: map,
        icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
        title: "Click for information about the Guggenheim museum in Venice",
        maxWidth: 200,
        maxHeight: 200
    });

    google.maps.event.addListener(var_marker, 'click', function () {
        var_infowindow.open(map, var_marker);
    });
    // a  div where we will place the buttons
    ctrl = $('<div/>').css({
        background: '#fff',
        border: '1px solid #000',
        padding: '4px',
        margin: '2px',
        textAlign: 'center'
    })[0];
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(ctrl);
ctrl=$(ctrl);



var places = {
    restaurant: {
        label: 'restaurants',
        //the category may be default-checked when you want to
        //uncomment the next line
        //checked:true,
        icon: 'https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png',
        items: [
            ['Melt Bar and Grill', 41.485345, -81.799047],
            ['Sloane Pub', 41.486182, -81.824178],
            ['Spitfire Salon', 41.479670, -81.768430],
            ['Mahall\'s', 41.476989, -81.781094],
            ['Szechwan Garden', 41.485615, -81.787890]
        ]
    },
    park: {
        label: 'parks',
        //the category may be default-checked when you want to
        //uncomment the next line
        //checked:true,
        icon: 'https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png',
        items: [
            ['Lakewood Park', 41.494457, -81.797605],
            ['Madison Park', 41.476969, -81.781929],
            ['Tuland Park', 41.464052, -81.788041]
        ]
    }
},

infowindow = new google.maps.InfoWindow();



//clear all-button
ctrl.append($('<input>', {
    type: 'button',
    value: 'clear all'
})
    .click(function () {
    $(this).parent().find('input[type="checkbox"]')
        .prop('checked', false).trigger('change');
}));
ctrl.append($('<hr/>'));

//now loop over the categories
$.each(places, function (c, category) {

    //a checkbox fo the category
    var cat = $('<input>', {
        type: 'checkbox'
    }).change(function () {
        $(this).data('goo').set('map', (this.checked) ? map : null);
    })
    //create a data-property with a google.maps.MVCObject
    //this MVC-object will do all the show/hide for the category 
    .data('goo', new google.maps.MVCObject)
        .prop('checked', !! category.checked)

    //this will initialize the map-property of the MVCObject
    .trigger('change')

    //label for the checkbox
    .appendTo($('<div/>').css({
        whiteSpace: 'nowrap',
        textAlign: 'left'
    })
        .appendTo(ctrl))
        .after(category.label);
  


    //loop over the items(markers)
    $.each(category.items, function (m, item) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(item[1], item[2]),
            title: item[0],
            icon: category.icon
        });

        //bind the map-property of the marker to the map-property
        //of the MVCObject that has been stored as checkbox-data 
        marker.bindTo('map', cat.data('goo'), 'map');
        google.maps.event.addListener(marker, 'click', function () {
            infowindow.setContent(item[0]);
            infowindow.open(map, this);
        });
    });


});
    //show all-button
ctrl.prepend($('<br/>'));
$('<input>', {
    type: 'button',
    value: 'show all'
})
    .click(function () {
        
    $(this).parent().find('input[type="checkbox"]')
        .prop('checked', true).trigger('change');
}).prependTo(ctrl).click();
 }
google.maps.event.addDomListener(window, 'load', map_init);

html, body, #map {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map" ></div>

如何在页面加载时检查此地图中的复选框？

1 个答案: