我的问题是当我切换beetwen选择列表时。标记消失，但并非总是如此，它们不应该消失。为什么呢？
也许这里有问题因为我使用（我认为是这样）闭包。
for (var i = 0; i < locations.length; i++) {
if (locations[i][1] =='undefined'){ description ='';} else { description = locations[i][1];}
if (locations[i][2] =='undefined'){ telephone ='';} else { telephone = locations[i][2];}
if (locations[i][3] =='undefined'){ email ='';} else { email = locations[i][3];}
if (locations[i][4] =='undefined'){ web ='';} else { web = locations[i][4];}
if (locations[i][7] =='undefined'){ markericon ='';} else { markericon = locations[i][7];}
geokoder.geocode
(
{ 'address': locations[i][0]+','+locations[i][1]}, (function(i) {
return function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
marker[i] = new google.maps.Marker({
icon: markericon,
position: results[0].geometry.location,
map: map,
title: locations[i][0],
desc: description,
tel: telephone,
email: email,
web: web
});
//środkuje mapę
map.setCenter(results[0].geometry.location);
link = '';
bindInfoWindow(marker[i], map, locations[i][0], locations[i][1], telephone, email, web, link);
}
}})(i)
);
}
答案 0 :(得分：0)
编辑：我的计算机上的geoLocation找不到标记3,11,12,13,14,15。也许将国家/地区添加到搜索请求中是个好主意。
EDIT2：地理编码器限制为10个结果。正如这个线程指出的那样：你应该将坐标存储在某处;您无法在多个地点How do I Geocode 20 addresses without receiving an OVER_QUERY_LIMIT response?使用地理编码器。
你有一些工作，但我认为这是你需要的。
查看函数getVisibleLocations，查看开关中的值是否正确
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#map {
height: 400px;
width: 400px;
}
.gm-style-iw {
overflow: hidden; /* Google Maps bug; the first time you open an infoWindow, the size is too short, this produces a window with scroll bar */
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script>
//obiekt geokodowania
var geokoder;
//ikonka markera
var image = 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00';
//obiekt mapy
var map;
//tablica markerów
var markers = [];
var visibleLocations = [];
locations = [
['Stargard Szczecinski', 'Uslugowa 1a', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image],
['Choszczno', 'Kwiatowa 7', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image],
['Nowogard', '3 Maja 6a', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image],
['Myslibórz', 'Lipowa 18', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image],
['Pyrzyce', 'Narutowicza 6', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image],
['Chojna', 'Jagiellonska 15', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image],
['Walcz', 'Bydgoska 75', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image],
['Bartoszyce','Ketrzynska 37b', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image],
['Braniewo','Królewiecka 61', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image],
['Goldap','Gumbinska 1', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image],
['Ketrzyn','Mazowiecka 17', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image],
['Lidzbark Warminski','Olsztynska 6', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image],
['Lubawa','Fijewo 69', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image],
['Mragowo','Olsztynska 13', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image],
['Nidzica','Dzialdowska 14A', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image],
['Szczytno','Polna 1', 'undefined', 'undefined', 'undefined', 'undefined', 'undefined', image],
];
// we only need to search for these locations once. Let's just search the at the start.
// we will copy (a pointer to) the marker in locations, as locations[i][9] .
// This makes it easy to find which marker belongs to which address
function searchAllMarkerPositions() {
for (var i = 0; i < locations.length; i++) {
if (locations[i][1] =='undefined'){ description ='';} else { description = locations[i][1];}
if (locations[i][2] =='undefined'){ telephone ='';} else { telephone = locations[i][2];}
if (locations[i][3] =='undefined'){ email ='';} else { email = locations[i][3];}
if (locations[i][4] =='undefined'){ web ='';} else { web = locations[i][4];}
if (locations[i][7] =='undefined'){ markericon ='';} else { markericon = locations[i][7];}
geokoder.geocode({
'address': locations[i][0]+','+locations[i][1]}, (function(i) {
return function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
markers[i] = new google.maps.Marker({
icon: markericon,
position: results[0].geometry.location,
// map: map,
title: locations[i][0],
desc: description,
tel: telephone,
email: email,
web: web
});
// search for the default markers
var visibleLocations = getVisibleLocations(null);
if (visibleLocations.indexOf(i) > -1) {
markers[i].setMap(map);
}
else {
markers[i].setMap(null);
}
// we will copy (a pointer to) the marker in locations
locations[i][9] = markers[i];
// let's center the map to the first marker
if (i==0) {
map.setCenter(markers[i].getPosition());
}
// bind the infoWindow
bindInfoWindow(markers[i], map, locations[i][0], locations[i][1], locations[i][2], locations[i][3], '');
// // srodkuje mape
// map.setCenter(results[0].geometry.location);
}
}})(i)
);
}
}
// load the map - search all the markers once (store them in var markers) - read the <select> and make the right markers visible
function init() {
geokoder = new google.maps.Geocoder();
var mapOptions = {
center: new google.maps.LatLng(50.259808, 19.02602),
zoom: 5,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
},
disableDoubleClickZoom: true,
mapTypeControl: false,
scaleControl: false,
scrollwheel: true,
panControl: false,
streetViewControl: false,
draggable : true,
overviewMapControl: true,
overviewMapControlOptions: {
opened: false,
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
map = new google.maps.Map(
document.getElementById('map'),
mapOptions
);
searchAllMarkerPositions();
// handle of the select
// lokalizacje w zaleznosci od wybranego regionu
$("#sklepy").change(function () {
var val = $(this).val();
var visibleLocations = getVisibleLocations(val);
updateVisibleMarkers(visibleLocations);
});
}
// Pokazuje chmurke z opisem
function bindInfoWindow(marker, map, title, desc, telephone, email, web, link) {
var infoWindowVisible = (function () {
var currentlyVisible = false;
return function (visible) {
if (visible !== undefined) {
currentlyVisible = visible;
}
return currentlyVisible;
};
}());
iw = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function() {
if (infoWindowVisible()) {
iw.close();
infoWindowVisible(false);
}
else {
// znikanie innych chmurek
iw.close();
var html= "<div style='color:#000;background-color:#fff;padding:5px;width:150px;'><h3>Sklep GRENE</h3><h4>"+title+"</h4><p>"+desc+"<p></div>";
iw = new google.maps.InfoWindow({content:html});
iw.open(map,marker);
infoWindowVisible(true);
}
});
google.maps.event.addListener(iw, 'closeclick', function () {
infoWindowVisible(false);
});
}
// reads the visible markers. Leave the parameter null to get the default.
function getVisibleLocations(val) {
switch (val) {
default:
var visibleLocations = [0, 1, 2, 3, 4, 5, 6]; // the indexes of the locations
break;
case "warminsko-mazurskie":
var visibleLocations = [7, 8, 9, 10, 11, 12, 13, 14, 15];
break;
case "zachodniopomorskie":
var visibleLocations = [1, 4, 5, 6, 3, 2, 0]; // this looks exactly like de default, but different order. Correct?
break;
}
return visibleLocations;
}
function updateVisibleMarkers(visibleLocations) {
clearAllMarkers();
for (var i=0; i<markers.length; i++) {
if (typeof markers[i] == 'undefined') {
continue;
}
if (visibleLocations.indexOf(i) > -1) {
markers[i].setMap(map);
}
}
}
function clearAllMarkers() {
for (var i=0; i<markers.length; i++) {
if (typeof markers[i] == 'undefined') {
continue;
}
markers[i].setMap(null);
}
}
google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body>
<div class="wyszukiwarka">
<form>
<label for="sklepy" class="accessibility">Wybierz region</label>
<select name="sklepy" id="sklepy" class="no-margin">
<option value="">-- Wybierz region --</option>
<option value="warminsko-mazurskie">warminsko-mazurskie</option>
<option value="zachodniopomorskie">zachodniopomorskie</option>
</select>
<div id="map"></div>
</form>
</div>
</body>
</html>