GoogleMapsAPI - erstellen Marker filtert

Question

Ich bin eine dynamische Karte mache den Google Maps API verwenden, das den Marker verwendet eine Liste von vordefinierten Positionen zu markieren, wie zB:

self.locations = [{ 
     name: 'Foxtrot', 
     lat: 38.713905, 
     lng: -9.1518868, 
     type: 'Bar' 
    } 

Es hat auch ein Suchfeld, das erlaubt Sie filtern nach dem Namen der Standorte (filteredNav). Es sollte auch die Marker filtern, aber ... das ist das Problem.

Die Empfehlung, die ich habe ist folgendes:

Try Schreiben console.log (self.location_array()) ;. Da Lage und Markerdaten modal getrennt ist, können Sie in einer Schleife haben, werde durch self.location_array() zu verarbeiten und zu finden, welche zu zeigen, welche durch Aufruf von setVisible (oder setMap) auf dem Marker-Objekt zu verbergen.

Dies ist mein Code:

// Create observable array 
self.nav = ko.observableArray(self.locations); 
// Create empty observable string 
self.filter = ko.observable(''); 
// Show nav and filter 
self.filteredNav = ko.computed(function() { 

    var filter = self.filter().toLowerCase(); 

    if (!filter) { 
     return self.nav(); 
    } 
    return self.nav().filter(function(i) { 
     // Check for proper casing or lowercase 
     return i.name.toLowerCase().indexOf(filter) > -1 || i.name.indexOf(filter) > -1; 
    }); 

    //THIS IS THE PROBLEM! 
    for (var i = 0; i < location_array()[i].length; i++) { 
    //?????? 
     location_array()[i].setVisible(true); 
    }//????? 

} 

Anmerkung: beobachtbaren Array Implementierung: vm.location_array()[i]

Link to the project

So ... die Frage ist ... wie kann ich tun die Schleife? Ich habe keine Ahnung, wie es geht ....

Answer 1

Zunächst einmal hat der Code, den Sie vorgestellt haben, einige 'mysteriöse' Teile. Zum Beispiel, was ist self, was ist ko, was ist observableArray usw. Man kann nur raten, was jeder von diesen sind.

So werde ich Ihnen einfach die allgemeine Logik beschreiben, wie Sie erreichen, was Sie wollen.

Die Logik ist ziemlich einfach.

Auf die gleiche Weise Sie die Orte in der Seitenleiste auswählen, wenn Sie schreiben, sollten Sie die Anordnung von Markierungen filtern setVisible mit true oder false

Dies bedeutet, zu nennen, dass, wenn Sie die Markierungen erstellen, sollten Sie speichern sie zu einem separaten Array.

Wenn Sie eine Markierung erstellen, z.

var marker = new google.maps.Marker({ 
    map: map, 
    position: new google.maps.LatLng(latitude, longitude) 
}) 

hinzufügen name Eigenschaft, oder etwas ähnliches, um es, wie so

var marker = new google.maps.Marker({ 
    map: map, 
    position: new google.maps.LatLng(latitude, longitude), 
    name: 'Foxtrot` 
}) 

, so dass Ihre erstellt hat eine name Eigenschaft, die Sie Ihre Array von Markern filtern können.

So, um Ihre Markierungen Array zu filtern, sollten Sie einfach das Array iterieren und überprüfen Sie die .name Eigenschaft jedes Objekt, und wenn der Name nicht mit dem eingegebenen Such entspricht, einfach setVisible(false) auf die Markierung, sonst tun setVisible(true)

Hoffe, das hilft.