这里是由状态存储过滤的溶液。你将需要实现语言或其他过滤选项,但总体结构在那里。基本思想是将所有存储数据保存在一个数组中,并且如果标记映射不符合过滤标准,则简单地将标记映射设置为空。我为状态名称使用了文本匹配 - 如果您希望真的很喜欢,您可以实现检查是否在多边形边界发生了点击。
我用jQuery来加载和处理状态的XML数据(以及显示商店列表),所以你需要确保你有存储在同一台服务器上的脚本上的数据。
<html>
<head>
<script type="text/javascript" src= "http://maps.google.com/maps/api/js?sensor=false">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script>
var map;
var stores;
var options = {
currState: ""
}
//sample stores data - marker Obj will store reference to marker object on the map for that store
stores = [{
"name": "store1",
"lat": "37.9069",
"lng": "-122.0792",
"state": "California",
"languages": ["Spanish", "English"],
"markerObj": ""
}, {
"name": "store2",
"lat": "37.7703",
"lng": "-122.4212",
"state": "California",
"languages": ["English"],
"markerObj": ""
}, {
"name": "store3",
"lat": "39.251",
"lng": "-105.0051",
"state": "Colorado",
"markerObj": ""
}]
function init(){
var latlng = new google.maps.LatLng(37.9069, -122.0792);
var myOptions = {
zoom: 4,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
showStates();
showStores();
}
function showStates(){
//load the XML for state boundaries and attach events
$.get("states.xml", function(data){
$(data).find("state").each(function(){
coord = [];
state = $(this).attr("name");
stateCol = $(this).attr("colour");
$(this).find("point").each(function(){
lat = $(this).attr("lat")
lng = $(this).attr("lng")
coord.push(new google.maps.LatLng(lat, lng));
})
//draw state poly
statePoly = new google.maps.Polygon({
paths: coord,
strokeColor: "#000000",
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: stateCol,
fillOpacity: 0.5
});
statePoly.setMap(map);
//attach click events to a poly
addListeners(state, statePoly, coord);
//attach click events to poly
})
})
}
function addListeners(state, poly, coord){
google.maps.event.addListener(poly, 'click', function(){
//zoom in to state level
bounds = new google.maps.LatLngBounds();
for (i = 0; i < coord.length; i++) {
bounds.extend(coord[i])
}
map.fitBounds(bounds);
//do store display and filtering
filterStoresByState(state);
});
}
function showStores(){
for (i = 0; i < stores.length; i++) {
var myLatlng = new google.maps.LatLng(stores[i].lat, stores[i].lng);
marker = new google.maps.Marker({
position: myLatlng,
map: map
});
//store the marker object for later use
stores[i].markerObj = marker;
//generate a list of stores
$(".stores").append("<li>" + stores[i].name + "-" + stores[i].state + "</li>")
}
}
//do the filtering - you will need to expand this if you want add additional filtering options
function filterStoresByState(state){
$(".stores").html("");
for (i = 0; i < stores.length; i++) {
if (stores[i].state != state) {
(stores[i].markerObj).setMap(null);
}
else {
(stores[i].markerObj).setMap(map)
$(".stores").append("<li>" + stores[i].name + "-" + stores[i].state + "</li>")
}
}
}
</script>
</head>
<body onload="init()">
<div id="map" style="width: 600px;height: 400px;">
</div>
<div>
<ul class="stores">
</ul>
</div>
</body>