admin管理员组文章数量:1201982
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 ?
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 ?
Share Improve this question edited Aug 4, 2010 at 21:44 Daniel Vassallo 344k72 gold badges512 silver badges446 bronze badges asked Jul 10, 2010 at 13:52 Nikola SivkovNikola Sivkov 2,8523 gold badges37 silver badges63 bronze badges 2- 1 I never did something like that (showing/hiding markers), so all I can is post a link to an example econym.org.uk/gmap/example_categories.htm – robertbasic Commented Jul 10, 2010 at 13:58
- Beaches code works with this fix: position: new google.maps.LatLng(beaches[i][1], beaches[i][2]), – dalton Commented Oct 22, 2011 at 12:45
2 Answers
Reset to default 19There 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:
You basically just need to store references to Marker objects in an array, set their type (school, bus stop, etc.) and then on some event loop through and hide/show as appropriate:
var markers = [];
// create Marker
marker.locType = 'school'; //as appropriate
function hideMarkersOfType(type) {
var i = markers.length;
while(i--) {
if (markers[i].locType == type) {
markers[i].setVisible(false);
}
}
}
// similar function showMarkersOfType() calling markers[i].setVisible(true);
That should be a good start anyway.
本文标签： javascriptGoogle Maps marker groupingStack Overflow
版权声明：本文标题：javascript - Google Maps marker grouping - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1738643173a2104429.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论