来自这里的演示here。正如您所看到的那样,如果您单击该复选框,就像餐馆或公园一样。标记将出现。但这些是两个类别项目的标记。
我想为地图的默认位置添加一个地图标记。
我尝试添加此功能,但它无效。
var map;
var var_location = new google.maps.LatLng(45.430817,12.331516);
function map_init() {
var var_mapoptions = {
center: var_location,
zoom: 16,
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: 'images/mapicon.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);
});
}
var places={
restaurant:{
label:'restaurants',
//the category may be default-checked when you want to
//uncomment the next line
//checked:true,
icon: 'images/map-marker/01.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:'images/map-marker/02.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);
});
});
});
//use the buttons-div as map-control
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(ctrl[0]);
}
);
google.maps.event.addDomListener(window, 'load', map_init);
由于