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

这是一个演示

正如你所看到的，谷歌地图上的复选框没有被选中。我想让他们在页面加载检查，并显示所有的标记

这是我的密码

    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', !! category.checked)

但它不起作用

提前感谢您的帮助

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

函数映射_init（）{
var var_映射选项={
中心：新google.maps.LatLng（41.478189，-81.798588），
缩放：13，
mapTypeId:google.maps.mapTypeId.ROADMAP，
泛控制：错误，
旋转控制：错误，
街景控制：错误
};
map=new google.maps.map（document.getElementById（“map”），
var_地图选项）；
var contentString=
'' +
“佩吉·古根海姆系列
”+
“多尔索杜罗，701-704
”+
'30123，威尼斯
'+
“P:（+39）0412405411
”+
'';
var var_infowindow=新的google.maps.infowindow({
内容：contentString
});
var var_marker=新的google.maps.marker({
位置：新google.maps.LatLng（45.430817,12.331516），
地图：地图，
图标：'http://maps.google.com/mapfiles/ms/icons/blue.png',
标题：“点击查看有关威尼斯古根海姆博物馆的信息”，
最大宽度：200，
最大高度：200
});
google.maps.event.addListener（var_标记，'click'，函数（）{
打开（映射，变量标记）；
});
//我们将放置按钮的div
ctrl=$（''）.css({
背景：“#fff”，
边框：“1px实心#000”，
填充：“4px”，
边距：“2px”，
textAlign:“中心”
})[0];
控件[google.maps.ControlPosition.RIGHT\u BOTTOM].push（ctrl）；
ctrl=$（ctrl）；
变量位置={
餐厅：{
标签:"食肆",，
//如果需要，可以默认选中该类别
//取消注释下一行
//核对：对，
图标：'https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png',
项目：[
[41.485345，-81.799047]，
[斯隆酒吧，41.486182，-81.824178]，
[“喷火沙龙”，41.479670，-81.768430]，
[Mahall's'，41.476989，-81.781094]，
[Szechwan Garden'，41.485615，-81.787890]
]
},
公园：{
标签：“公园”，
//如果需要，可以默认选中该类别
//取消注释下一行
//核对：对，
图标：'https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png',
项目：[
[Lakewood Park'，41.494457，-81.797605]，
['Madison Park'，41.476969，-81.781929]，
['Tuland Park'，41.464052，-81.788041]
]
}
},
infowindow=new google.maps.infowindow（）；
//清除所有按钮
ctrl.追加（$（''）{
键入：“按钮”，
值：“全部清除”
})
。单击（函数（）{
$（this）.parent（）.find（'input[type=“checkbox”]”）
.prop（'checked'，false.）.trigger（'change'）；
}));
ctrl.append（$（'
'）；
//现在，在类别上循环
$。每个（位置、功能（c、类别）{
//类别的复选框
var cat=$（''）{
键入：“复选框”
}).改变（功能）{
$（this.data（'goo'）.set（'map'，（this.checked）？map:null）；
})
//使用google.maps.MVCObject创建数据属性
//此MVC对象将执行类别的所有显示/隐藏操作
.data（'goo'，新的google.maps.MVCObject）
.prop（'checked'，！！category.checked）
//这将初始化MVCObject的map属性
.trigger（'更改'）
//复选框的标签
.appendTo（$（''）.css({
空白：“nowrap”，
textAlign:'左'
})
.appendTo（ctrl））
.之后（类别.标签）；
//在项目（标记）上循环
$.each（类别.项目，功能（m，项目）{
var marker=new google.maps.marker({
位置：新的google.maps.LatLng（项目[1]，项目[2]），
标题：项目[0]，
图标：category.icon
});
//将标记的map属性绑定到map属性
//已存储为复选框数据的MVCObject的
marker.bindTo（'map'，cat.data（'goo'），'map'）；
google.maps.event.addListener（标记，'click'，函数（）{
infowindow.setContent（项[0]）；
打开（地图，这个）；
});
});
});
//全部显示按钮
ctrl.prepend（$（'
'）；
$('', {
键入：“按钮”，
值：“全部显示”
})
。单击（函数（）{
$（this）.parent（）.find（'input[type=“checkbox”]”）
.prop（'checked'，true.）.trigger（'change'）；
}).prependTo（ctrl）。单击（）；
}
google.maps.event.addDomListener（窗口'load'，map\u init）
html，body，#map{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}

您试图将
TRUE
改为TRUE。我用
.prop（'checked'，true）
试过了，它还在工作。@Patel是的，我试过了。它只适用于选中复选框的情况，但标记不会显示。您可以重试并注意到它。我认为我们应该编辑第113行
$（this）.data（'goo'）.set（'map'，（this.checked）？map:null）上的内容.prop('checked', !! category.checked)