Load Marker aus der Datenbank als toggable Layer

Question

Ich versuche, Marker aus einer Datenbank als eine Ebene zu meiner Google Map zu laden. Ich lade bereits KML-Ebenen, möchte aber, dass der Benutzer eigene benutzerdefinierte Markierungen in meiner Datenbank speichern und laden kann.

Meine Datenbank-Struktur sieht wie folgt aus:

| ID | TITLE | LAT | LON | 

Da jeder Benutzer ihre eigenen Punkte haben, möchte ich den Benutzer Punkte zu bekommen und sie als eine Schicht auf der Karte zusätzlich zu anderen Standard-Layer laden (KML). Ich lese, dass das Erstellen einer Datenschicht der beste Ansatz wäre und auch die Verwendung von geoJSON, von dem ich immer noch nicht weiß, wie ich aus meiner Datenbank erstellen kann.

Für jetzt verwende ich eine generische JSON-Datei nur um zu sehen, ob ich das tatsächlich als eine toggable Ebene hinzufügen kann, aber ich kann es nicht richtig machen. Sobald ich das funktioniert habe, kann ich herausfinden, wie man die Ergebnisse aus der Datenbank holt und sie in geoJSON formatiert und zur Karte hinzufügt.

Dies ist, wie ich versucht habe, die JSON-Daten als umschaltbare Schicht zu erhalten, aber es funktioniert nicht:

function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: -49.7770641, lng: 55.6602758}, 
    zoom: 6, 
    mapTypeControlOptions: { 
     position: google.maps.ControlPosition.RIGHT_TOP 
     }, 

    }); 

    layers[0] = new google.maps.KmlLayer('http://www.example.com/kmllayer1.kml', {preserveViewport: true, suppressInfoWindows: false, zIndex: 1}); 
    layers[1] = new google.maps.KmlLayer('http://www.example.com/kmllayer2.kml', {preserveViewport: true, zIndex: 2, suppressInfoWindows: true}); 
    layers[2] = map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json'); 
    for (var i = 0; i < layers.length; i++) { 
     layers[i].setMap(map); 
     } 
} 
function toggleLayer(i) { 
     if(layers[i].getMap() === null) { 
     layers[i].setMap(map); 
     } 
     else { 
     layers[i].setMap(null); 
     } 
    } 

Answer 1

Die Datenschicht aus KmlLayer unterscheidet, das .loadGeoJson Verfahren eine Reihe von Data.Feature Objekten zurückgibt . Von the documentation:

addGeoJson (GeoJSON: Objekt, Optionen: Data.GeoJsonOptions)

Rückgabewert: Array<Data.Feature>

Fügt GeoJSON verfügt zur Sammlung hinzu. Geben Sie dieser Methode einen geparsten JSON. Die importierten Features werden zurückgegeben. Es wird eine Ausnahme ausgelöst, wenn GeoJSON nicht importiert werden konnte.

es zu einem Array von Schichten wie diese hinzufügen (es zu beachten ist nur eine):

layers[2] = map.data; 
layers[2].loadGeoJson(GEOJSON_URL); 

proof of concept fiddle

Code-Schnipsel:

var geocoder; 
 
var map; 
 
var layers = []; 
 

 
function toggleLayer(i) { 
 
    if (layers[i].getMap() === null) { 
 
    layers[i].setMap(map); 
 
    } else { 
 
    layers[i].setMap(null); 
 
    } 
 
} 
 

 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    center: { 
 
     lat: 43, 
 
     lng: -87 
 
    }, 
 
    zoom: 4, 
 
    mapTypeControlOptions: { 
 
     position: google.maps.ControlPosition.RIGHT_TOP 
 
    }, 
 

 
    }); 
 

 
    layers[0] = new google.maps.KmlLayer('http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml', { 
 
    preserveViewport: true, 
 
    suppressInfoWindows: false, 
 
    zIndex: 2 
 
    }); 
 
    layers[1] = new google.maps.KmlLayer('https://developers.google.com/kml/documentation/us_states.kml', { 
 
    preserveViewport: true, 
 
    zIndex: 1, 
 
    suppressInfoWindows: true 
 
    }); 
 
    layers[2] = map.data; 
 
    layers[2].loadGeoJson('http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojson'); 
 
    for (var i = 0; i < layers.length; i++) { 
 
    layers[i].setMap(map); 
 
    } 
 
    var btns = document.getElementsByClassName("btn"); 
 
    for (var i = 0; i < btns.length; i++) { 
 
    google.maps.event.addDomListener(btns[i], 'click', (function(i) { 
 
     return function() { 
 
     toggleLayer(i); 
 
     } 
 
    })(i)); 
 
    } 
 
} 
 

 
google.maps.event.addDomListener(window, "load", initMap);

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<input class="btn" id="btn0" type="button" value="0" /> 
 
<input class="btn" id="btn1" type="button" value="1" /> 
 
<input class="btn" id="btn2" type="button" value="2" /> 
 
<div id="map"></div>