根据其类别或组隐藏/显示Google地图标记 [英] Hide/Show Google Maps markers based on their category or group
问题描述
我正在创建可显示用户组标记的Google地图。说一个地区的所有餐馆或公园。目前，我已经能够创建一组餐厅和一组公园，每个公园都有自己的标记颜色。我甚至可以通过点击地图下方的文字来隐藏或显示所有标记。但是现在我想将标记分成不同的类别，以便我可以隐藏或显示基于复选框的标记。代码如下，但这里是我想要做的事情：
- 地图应该是空白的，默认情况下没有标记
- 我可以将标记分为自己的类别并隐藏并显示每个类别
- 可以一次显示多个类别
这是我的代码
<！DOCTYPE html> ;
< html>
< head>
< meta http-equiv =content-typecontent =text / html; charset = UTF-8/>
< title> Google地图多个标记< / 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 =mapstyle =width：100％; height：650px;>< / div>
< p>< a onClick =clearMarkers（）;>清除标记< / a>< / p>
< p>< a onClick =showRestaurants（）;>显示标记< / a>< / p>
< script type =text / javascript>
//餐馆标记
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（）;
//为（i = 0; i< restaurants.length; i ++）{
marker = new google.maps.Marker（{
位置：new google.maps.LatLng（餐厅[i] [1]，餐厅[i] [2]），
地图：地图，
图标：'images / markers / red_Marker。 png'
}）;
markers.push（marker）;
google.maps.event.addListener（marker，'click'，（function（marker，i）{
return function（）{
infowindow.setContent（restaurants [i ] [b]）;
infowindow.open（map，marker）;
}
}）（marker，i））;
}
//创建并放置Parks标记
（i = 0; i
position：new google.maps.LatLng（公园[i] [1]，公园[i] [2]），
map：地图，
图标：'图片/markers/blue_Marker.png'
}）;
markers.push（marker）;
google.maps.event.addListener（marker，'click'，（function（marker，i）{
return function（）{
infowindow.setContent（parks [i ] [b]）;
infowindow.open（map，marker）;
}
}）（marker，i））;
}
//设置数组中所有标记的映射。
函数setAllMap（map）{
for（var i = 0; i< markers.length; i ++）{
markers [i] .setMap（map）;
}
}
//从地图中删除标记，但将它们保留在数组中。
函数clearMarkers（）{
setAllMap（null）;
}
//显示当前在数组中的任何标记。
函数showRestaurants（）{
setAllMap（map）;
}
< / script>
< / body>
< / html>
A google.maps.MVCObject 是一个很好的功能。
大部分google.maps-classes创建MVCObjects，一个Marker也是一个MVCObject。
优点：您可以将一个MVCObject的属性绑定到另一个MVCObject的属性。
当源对象中的属性将被更改时，它也将在目标对象中更新。
因此，您只需要一个MVCObject for每个类别。将MVCObject的属性（例如 map ）设置为 google.maps.Map 或 null 并将标记的 map -property绑定到 map - 属性
要隐藏或显示所有标记，请将所有category-MVCObjects的map-property设置为特定值（maps-instance或null ）。
示例实现（为了简化循环，我已经稍微修改了类别的结构，对于每个类别，都会创建一个复选框来控制显示）：
$ $ p $ $ $ $ $ $ $（window）.load（function（）{
var places = {
restaurant：{
label：'restaurants'，
//当您想要
时，类别可能会被默认选中//取消注释下一行
//检查：true，
图标：'http://maps.gstatic.com/mapfiles/markers2/marker.png'，
物品：[
[ '熔化酒吧和烧烤'，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'，
//当您想要
时，该类别可以被默认选中//取消注释下一行
//选中：true，
图标： 'http://maps.gstatic.com/mapfiles/markers2/boost-marker-mapview.png'，
物品：[
['Lakewood Park'，41.494457，-81.797605]，
''Madison Park'，41.476969，-81.781929]，
['Tuland Park'，41.464052，-81.788041]
]
}
}，
map =新的google.maps.Map（
document.getElementById（'map'），
{
zoom： 14，
center：new google.maps.LatLng（41.485345，-81.799047），
}
），
infowindow = new google.maps.InfoWindow（），
// a div我们将放置按钮
ctrl = $（'< div />'）。css（{background：'＃fff'，
border：' 1px solid＃000'，
padding：'4px'，
margin：'2px'，
textAlign：'center'
}）;
//显示所有按钮
ctrl.append（$（'< input>'，{type：'button'，value：'show all'}）
.click（function （）{
$（this）.parent（）。find（'input [type =checkbox]'）
.prop（'checked'，true）.trigger（'change'）;
}））;
ctrl.append（$（'< br />'））;
清除所有按钮
ctrl.append（$（'< input>'，{type：'button'，value：'clear all'}）
.click（'function（）{
$（this）.parent（）。find（'input [type =checkbox]'）
.prop（'checked'，false）.trigger（'更改'）;
}））;
ctrl.append（$（'< hr />'））;
//现在遍历类别
$ .each（places，function（c，category）{
//类别复选框$ b $ （变换）函数（）{
$（this）.data（'goo'）。set（'map'，'< input>'，{type：'checkbox'}） （this.checked）？map：null）;
}）
//用google.maps.MVCObject创建一个数据属性
//这个MVC对象将完成所有的展示/隐藏类别
.data（'goo'，新的google.maps.MVCObject）
.prop（'checked'，!! category.checked）
//这将初始化MVCObject的map-property
.trigger（'change'）
//复选框的标签
.appendTo（$（'< div /> ;'）。css（{whiteSpace：'nowrap'，textAlign：'left'}）
.appendTo（ctrl））
.after（category.label）;
//循环的项目（标记）
$ .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
} ）;
//将标记的map-property绑定到已经存储为复选框的MVCObject的map-property
//数据
marker.bindTo（'map ，cat.data（ '咕'）， '映射'）;
google.maps.event.addListener（marker，'click'，function（）{
infowindow.setContent（item [0]）;
infowindow.open（map，this）;
}）;
}）;
}）;
//使用buttons-div作为地图控件
map.controls [google.maps.ControlPosition.TOP_RIGHT] .push（ctrl [0]）;
}
）;
演示： http://jsfiddle.net/doktormolle/brepbvww/
I'm in the process of creating a Google Map that can show users groups of markers. Say all the restaurants or parks in an area. Currently I've been able to create a set of restaurants and a set of parks, each with their own marker color. I can even hide or show all of the markers by clicking the text under the map. But now I want to separate the markers into categories so I can hide or show them based off a checkbox. The code is below, but here are the things I'd like to do:
- The map should be blank with no markers by default
- I can separate the markers into their own categories and hide and show each category
- Multiple categories can be shown at a time
Here is my code
<!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 is a nice feature to implement this.
Most of the google.maps-classes create MVCObjects, a Marker also is a MVCObject.
The advantage: you may bind a property of one MVCObject to a property of another MVCObject. When the property will be changed in the source-object it will also be updated in the target-object.
So you'll only need a MVCObject for each category. Set a property(e.g. map) of the MVCObject to either the google.maps.Map or null and bind the map-property of the markers to the map-property of the category-MVCObject, and it's done.
To hide or show all markers set the map-property of all category-MVCObjects to the particular value(maps-instance or null).
Sample-implementation(I've modified the structure of the categories a little bit to simplify the loops, for each category a checkbox will be created which controls the display of the related markers):
$(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]);
}
);
Demo: http://jsfiddle.net/doktormolle/brepbvww/
这篇关于根据其类别或组隐藏/显示Google地图标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
