Google地图标记分组 [英] Google Maps marker grouping
问题描述
我试图做到以下事情：在我的地图上有不同类型的标记，例如学校，图书馆，巴士站，我希望能够显示/隐藏每组标记。
b$ b
我一直在寻找谷歌一段时间，但没有出现：/ b / b
任何想法如何实现？
有很多种方法可以解决这个问题，但让我给你看一种方法。 b $ b
首先，让我们从一系列位置开始（从 Google Maps API教程）：
var beaches = [
['Bondi Beach '，-33.890542,151.274856,1]，
['Coogee Beach'，-33.923036,151.259052,1]，
['Cronulla Beach'，-34.028249,151.157507,2]，
['Manly Beach'，-33.800101,151.287478,2]，
['Maroubra Beach'，-33.950198,151.259302,2]
];
这实际上是一个数组数组。它代表5个澳大利亚海滩，我们有名称，纬度，经度和类别。在这种情况下，类别只是一个简单的数字。
然后重要的是我们保留了我们创建的标记的引用。要做到这一点，我们可以使用标记数组存储每个新标记，并且还可以使用其分类标识扩充每个标记对象： var markers = [];
var i，newMarker;
for（i = 0; i
position：new google.maps.LatLng （海滩[i] [1]，海滩[i] [2]），
图：地图，
标题：海滩[i] [0]
}）;
newMarker.category = beaches [i] [3];
newMarker.setVisible（false）;
markers.push（newMarker）;
}
最后，当我们需要显示标记时，我们可以简单地迭代 markers 数组，并根据我们想要显示的类别调用 setVisible（）方法。
您可能想查看以下完整示例：
<！DOCTYPE HTML>
< html>
< head>
< meta http-equiv =content-typecontent =text / html; charset = UTF-8/>
< title> Google Maps JavaScript API v3示例：标记类别< / title>
< script type =text / javascript
src =http://maps.google.com/maps/api/js?sensor=false>< / script>
< / head>
< body>
< div id =mapstyle =width：400px; height：300px;>< / div>
< input type =buttonvalue =Show Group 1onclick =displayMarkers（1）;>
< input type =buttonvalue =Show Group 2onclick =displayMarkers（2）;>
< script type =text / javascript>
var beaches = [
['Bondi Beach'，-33.890542,151.274856,1]，
['Coogee Beach'，-33.923036,151.259052,1]，
['Cronulla Beach'，-34.028249,151.157507,2]，
['Manly Beach'，-33.800101,151.287478,2]，
['Maroubra Beach'，-33.950198,151.259302,2 ]
];
var map = new google.maps.Map（document.getElementById（'map'），{
zoom：10，
center：new google.maps.LatLng（ - 33.88,151.28），
mapTypeId：google.maps.MapTypeId.ROADMAP
}）;
var markers = [];
var i，newMarker;
for（i = 0; i
position：new google.maps.LatLng （海滩[i] [1]，海滩[i] [2]），
图：地图，
标题：海滩[i] [0]
}）;
newMarker.category = beaches [i] [3];
newMarker.setVisible（false）;
markers.push（newMarker）;
}
function displayMarkers（category）{
var i;
（i = 0; i< markers.length; i ++）{
if（markers [i] .category === category）{
markers [i] .setVisible（真）;
}
else {
markers [i] .setVisible（false）;
}
}
}
< / script>
< / body>
< / html>
点击显示组2按钮后，上面的示例截图：
I'm trying to achieve the following thing: Have different types of markers on my map for example, schools, libraries, bus stops and I want to be able to show/hide each group of markers.
I have been searching google for a while but nothing came up :/
Any ideas how this can be achieved ?
There are various ways to tackle this, but let me show you one approach.
First, let's start with an array of locations (borrowed from the Google Maps API Tutorials):
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 1],
['Coogee Beach', -33.923036, 151.259052, 1],
['Cronulla Beach', -34.028249, 151.157507, 2],
['Manly Beach', -33.800101, 151.287478, 2],
['Maroubra Beach', -33.950198, 151.259302, 2]
];
This is actually an array of arrays. It represents 5 Australian beaches, and we have the name, latitude, longitude and category. The category in this case is just a number for the sake of simplicity.
Then it is important that we keep a reference of the markers that we create. To do this, we can use a markers array where we store each new marker, and we can also augment each marker object with its category id:
var markers = [];
var i, newMarker;
for (i = 0; i < beaches.length; i++) {
newMarker = new google.maps.Marker({
position: new google.maps.LatLng(beaches[i][1], beaches[i][2]),
map: map,
title: beaches[i][0]
});
newMarker.category = beaches[i][3];
newMarker.setVisible(false);
markers.push(newMarker);
}
Finally, when we need to show the markers, we can simply iterate over the markers array, and call the setVisible() method according to what category we would like to show.
You may want to check out the following complete example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Marker Categories</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 300px;"></div>
<input type="button" value="Show Group 1" onclick="displayMarkers(1);">
<input type="button" value="Show Group 2" onclick="displayMarkers(2);">
<script type="text/javascript">
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 1],
['Coogee Beach', -33.923036, 151.259052, 1],
['Cronulla Beach', -34.028249, 151.157507, 2],
['Manly Beach', -33.800101, 151.287478, 2],
['Maroubra Beach', -33.950198, 151.259302, 2]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.88, 151.28),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
var i, newMarker;
for (i = 0; i < beaches.length; i++) {
newMarker = new google.maps.Marker({
position: new google.maps.LatLng(beaches[i][1], beaches[i][2]),
map: map,
title: beaches[i][0]
});
newMarker.category = beaches[i][3];
newMarker.setVisible(false);
markers.push(newMarker);
}
function displayMarkers(category) {
var i;
for (i = 0; i < markers.length; i++) {
if (markers[i].category === category) {
markers[i].setVisible(true);
}
else {
markers[i].setVisible(false);
}
}
}
</script>
</body>
</html>
Screenshot from the above example, after clicking on the "Show Group 2" button:
这篇关于Google地图标记分组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![Google Maps JavaScript API v3示例：Marker Categories http ：//img535.imageshack.us/img535/8485/markercat.jpg](\"http://img535.imageshack.us/img535/8485/markercat.jpg\"){kind=link}
