Google 地图标记分组 [英] Google Maps marker grouping
问题描述
我正在努力实现以下目标:在我的地图上有不同类型的标记，例如学校、图书馆、公交车站，我希望能够显示/隐藏每组标记.
我已经在谷歌上搜索了一段时间，但没有任何结果:/
有什么想法可以实现吗?
有多种方法可以解决这个问题，但让我向您展示一种方法.
首先，让我们从一系列位置开始(从
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屋！
