Versuch, Markerbild basierend auf verschiedenen Datenbankabfragen dynamisch zu bestimmen

Question

Mit v3 der Google Map API habe ich einen Blick auf die USA. Ich habe Markierungen an Orten, die in lat und lng von 2 Adresse Abfragen in meiner Pg-Datenbank konvertiert werden. Ich versuche zu unterscheiden, welches Markierbild basierend auf welchem ​​Abfrageergebnis die Adresse erscheint. Ich habe erfolgreich 2 Objekte basierend auf diesen Abfragen erstellt und sie werden separat protokolliert, jedoch kann ich nicht die Quelle dieser Objekte verwenden, um zu bestimmen, welche Markierungen angezeigt werden.

var labels = ''; 
var iconBase = 'green.png'; 
var iconBaseRed = 'red.png'; 

var xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = function() { 

if (xhr.readyState == 4) { 
var arr = JSON.parse(xhr.responseText); 
console.log(xhr.responseText); 
if(Array.isArray(arr)){ 
showMarkers(arr); 
} 
} 
} 
xhr.open('GET', 'markers.php', true); 
xhr.send(); 

function showMarkers(locations){ 
var markers = locations.map(function(location, i) { 
return new google.maps.Marker({ 
position: location, 
icon: iconBase, 
label: labels[i % labels.length] 
}); 
}); 

var markerCluster = new MarkerClusterer(map, markers, 
     {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 
    } 


var xhrred = new XMLHttpRequest(); 
xhrred.onreadystatechange = function() { 

if (xhrred.readyState == 4) { 
var arrred = JSON.parse(xhrred.responseText); 
console.log(xhrred.responseText); 
if(Array.isArray(arrred)){ 
showMarkers(arrred); 
} 
} 
} 
xhrred.open('GET', 'markersred.php', true); 
xhrred.send(); 


function showMarkers(locations){ 
var markersRed = locations.map(function(locationred, i) { 
return new google.maps.Marker({ 
position: locationred, 
icon: iconBaseRed, 
label: labels[i % labels.length] 
}); 
}); 

var markerClusterRed = new MarkerClusterer(map, markersRed, 
     {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 

    } 

ich den Ansatz hatte für jeden XMLHttpRequest separate Variablen zu setzen, das ist, wie ich in der Lage war, mehrere JSON-Objekte zu erstellen. Ich habe dann versucht, das gleiche mit der ShowMarker-Funktion zu tun, aber es funktioniert nicht. Hier liegt mein Problem ... Jede Hilfe wird geschätzt.

Hier ist ein Link zum Test www.rightmediasolutions.com/gs_chrome/testing.html

Sie werden es bemerken nur (Konsolenprotokoll für Daten) zeigt iconBaseRed.

Answer 1

Wenn ich richtig verstehe, machst du zwei verschiedene Ajax-Aufrufe, und jeder von ihnen gibt ein Array von Standorten zurück. Jetzt möchten Sie ein anderes Markersymbol anzeigen, abhängig davon, von welchem ​​Ajax-Aufruf Sie zeichnen.

würde ich das Markierungssymbol als Parameter an die Funktion übergeben:

function showMarkers(locations, theIcon){ 
    var markers = locations.map(function(location, i) { 
     return new google.maps.Marker({ 
      position: location, 
      icon: theIcon, 
      label: labels[i % labels.length] 
    }); 
}); 

Dann haben jeden Ajax-Ergebnis Aufruf showMarkers mit eigenem Icon:

showMarkers(arr, iconBase); 
showMarkers(arrred, iconBaseRed);