bri*_*zzi 4 jquery google-maps google-maps-api-3
我正在创建一个可以向用户显示标记组的Google Map.说一个地区的所有餐馆或公园.目前,我已经能够创建一组餐厅和一组公园,每个公园都有自己的标记颜色.我甚至可以通过单击地图下的文本来隐藏或显示所有标记.但现在我想将标记分成几个类别,这样我就可以隐藏或显示基于复选框的标记.代码如下,但以下是我想要做的事情:
这是我的代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script></script>
</head>
<body>
<div id="map" style="width: 100%; height: 650px;"></div>
<p><a onClick="clearMarkers();">Clear Markers</a></p>
<p><a onClick="showRestaurants();">Show Markers</a></p>
<script type="text/javascript">
//Restaurants Markers
var restaurants = [
['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]
];
//Parks Markers
var parks = [
['Lakewood Park', 41.494457, -81.797605],
['Madison Park', 41.476969, -81.781929],
['Tuland Park', 41.464052, -81.788041]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: new google.maps.LatLng(41.485345, -81.799047),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = new Array();
//Create and Place Restaurant Markers
for (i = 0; i < restaurants.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(restaurants[i][1], restaurants[i][2]),
map: map,
icon: 'images/markers/red_Marker.png'
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(restaurants[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
//Create and Place Parks Markers
for (i = 0; i < parks.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(parks[i][1], parks[i][2]),
map: map,
icon: 'images/markers/blue_Marker.png'
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(parks[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
// Sets the map on all markers in the array.
function setAllMap(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setAllMap(null);
}
// Shows any markers currently in the array.
function showRestaurants() {
setAllMap(map);
}
</script>
</body>
</html>
A google.maps.MVCObject是实现此功能的一个很好的功能.
大多数google.maps-classes创建MVCObjects,Marker也是MVCObject.
优点:您可以将一个MVCObject的属性绑定到另一个MVCObject的属性.当在source-object中更改属性时,它也将在target-object中更新.
因此,每个类别只需要一个MVCObject.设置属性(如map在MVCObject要么对的)google.maps.Map或null与绑定map标记的-property到map该类别MVCObject的-属性,它完成.
要隐藏或显示所有标记,请将所有类别MVCObject的map属性设置为特定值(maps-instance或null).
示例实现(我已经修改了类别的结构以简化循环,对于每个类别,将创建一个控制相关标记显示的复选框):
$(window).load(function (){
var places={
restaurant:{
label:'restaurants',
//the category may be default-checked when you want to
//uncomment the next line
//checked:true,
icon: 'http://maps.gstatic.com/mapfiles/markers2/marker.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:'http://maps.gstatic.com/mapfiles/markers2/boost-marker-mapview.png',
items: [
['Lakewood Park', 41.494457, -81.797605],
['Madison Park', 41.476969, -81.781929],
['Tuland Park', 41.464052, -81.788041]
]
}
},
map = new google.maps.Map(
document.getElementById('map'),
{
zoom: 14,
center: new google.maps.LatLng(41.485345, -81.799047),
}
),
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]);
}
);
演示:http://jsfiddle.net/doktormolle/brepbvww/