Я пытаюсь построить карту трасс вокруг моего города.
Я использую файл XML для хранения всех данных трасс.Для каждого маркера у меня есть такие категории, как «поверхность», «сложность», «использование» и т. Д.
Я видел много примеров Карт Google, в которых используются флажки для отображения маркеров по категориям.Однако эти примеры, как правило, очень просты: возможно, три разных флажка.
С моей стороны отличается то, что у меня есть несколько категорий, и в каждой категории есть несколько возможных значений.Таким образом, определенный маршрут может иметь значения «use» «пеший туризм», «велосипед», «бег трусцой» и «конный спорт», потому что все разрешено.
Я хочу, чтобы на карте отображались только маркерыкоторые соответствуют ВСЕМ значениям, которые проверены (а не ЛЮБЫМ).
Я взломал это.Вы можете увидеть результат здесь : http://www.joshrenaud.com/pd/trails_withcheckboxes4.html
(Следует отметить, что существует ошибка, при которой, несмотря на то, что при загрузке проверяется только одна категория, все маркеры отображаются в любом случае.)
Не работает
Я довольно новичок в Javascript, поэтому я уверен, что сделал что-то не так, но не могу понять, что.
Мои конкретные вопросы:
Кто-нибудь видит что-нибудь поразительно очевидное, что мешает моему второму примеру работать?
Если нет, может кто-нибудь просто предложить, какую структуру петли мне нужно построить длясравнить несколько массивов флажков с несколькими массивами значений для любого заданного маркера?
Вот некоторые из соответствующих кодов, хотя вы можете просто просмотреть исходный код на приведенных выше примерах, чтобы увидетьвсе дело:
function createMarker(point,surface,difficulty,use,html) {
var marker = new GMarker(point,GIcon);
marker.mysurface = surface;
marker.mydifficulty = difficulty;
marker.myuse = use;
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
gmarkers.push(marker);
return marker;
}
function show() {
hide();
var surfaceChecked = [];
var difficultyChecked = [];
var useChecked = [];
var j=0;
// okay, let's run through the checkbox elements and make arrays to serve as holders of any values the user has checked.
for (i=0; i<surfaceArray.length; i++) {
if (document.getElementById('surface'+surfaceArray[i]).checked == true) {
surfaceChecked[j] = surfaceArray[i];
j++;
}
}
j=0;
for (i=0; i<difficultyArray.length; i++) {
if (document.getElementById('difficulty'+difficultyArray[i]).checked == true) {
difficultyChecked[j] = difficultyArray[i];
j++;
}
}
j=0;
for (i=0; i<useArray.length; i++) {
if (document.getElementById('use'+useArray[i]).checked == true) {
useChecked[j] = useArray[i];
j++;
}
}
//now that we have our 'xxxChecked' holders, it's time to go through all the markers and see which to show.
for (var k=0; k<gmarkers.length; k++) { // this loop runs thru all markers
var surfaceMatches = [];
var difficultyMatches = [];
var useMatches = [];
var surfaceOK = false;
var difficultyOK = false;
var useOK = false;
for (var l=0; l<surfaceChecked.length; l++) { // this loops runs through all checked Surface categories
for (var m=0; m<gmarkers[k].mysurface.length; m++) { // this loops through all surfaces on the marker
if (gmarkers[k].mysurface[m].childNodes[0].nodeValue == surfaceChecked[l]) {
surfaceMatches[l] = true;
}
}
}
for (l=0; l<difficultyChecked.length; l++) { // this loops runs through all checked Difficulty categories
for (m=0; m<gmarkers[k].mydifficulty.length; m++) { // this loops through all difficulties on the marker
if (gmarkers[k].mydifficulty[m].childNodes[0].nodeValue == difficultyChecked[l]) {
difficultyMatches[l] = true;
}
}
}
for (l=0; l<useChecked.length; l++) { // this loops runs through all checked Use categories
for (m=0; m<gmarkers[k].myuse.length; m++) { // this loops through all uses on the marker
if (gmarkers[k].myuse[m].childNodes[0].nodeValue == useChecked[l]) {
useMatches[l] = true;
}
}
}
// now it's time to loop thru the Match arrays and make sure they are all completely true.
for (m=0; m<surfaceMatches.length; m++) {
if (surfaceMatches[m] == true) { surfaceOK = true; }
else if (surfaceMatches[m] == false) {surfaceOK = false; break; }
}
for (m=0; m<difficultyMatches.length; m++) {
if (difficultyMatches[m] == true) { difficultyOK = true; }
else if (difficultyMatches[m] == false) {difficultyOK = false; break; }
}
for (m=0; m<useMatches.length; m++) {
if (useMatches[m] == true) { useOK = true; }
else if (useMatches[m] == false) {useOK = false; break; }
}
// And finally, if each of the three OK's is true, then let's show the marker.
if ((surfaceOK == true) && (difficultyOK == true) && (useOK == true)) {
gmarkers[i].show();
}
}
}