2017-10-25 3 views
0

Ich habe Probleme beim Anzeigen von Markern auf einer Karte aus einer JSON-Datei. Die Karte lädt gut, aber es zeigt keine Markierungen auf ... Wenn ich in die Javascript-Konsole schaue, kann ich sehen, dass ich einen kontinuierlichen Fehler bekomme (obwohl die Lat- und Lon-Objekte alle die korrekten Positionen mit console.log anzeigen). Ich werde den Fehler unten zusammen mit meiner Markerfunktion veröffentlichen. Jede Hilfe wird geschätzt, danke!wie LatLng als numerischen Wert

der Fehler:

the error message

Markierungsfunktionen:

displayGoogleMap(){ 
let latLng = new google.maps.LatLng(43.653908,-79.384293); 
let mapOptions = { 
center:latLng, 
zoom:12, 
mapTypeId : google.maps.MapTypeId.ROADMAP 
} 
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions); 
} 


getMarkers(){ 
//this.http.get('assets/data/markers.json').map((res)=>res.json()).subscribe(data=>{ 
this.http.get('http://app.toronto.ca/cc_sr_v1_app/data/edc_eventcal_APR?limit=500').map((res)=>res.json()).subscribe(data=>{ 
this.addMarkersMap(data); 
}); 

} 


addMarkersMap(markers){ 
for(let marker of markers) 
{ 
var loc = {lat: marker.calEvent.locations[0]['coords'].lat , lon: marker.calEvent.locations[0]['coords'].lng}; 

    console.log(loc); 
    marker = new google.maps.Marker({ 
    position: loc, 
    map: this.map 
    }); 

} 
} 

json feed:

http://app.toronto.ca/cc_sr_v1_app/data/edc_eventcal_APR?limit=500

+0

Umbenennen des Schlüsselnamens ** lon in lng ** 'var Lok = {lat: marker.calEvent.locations [0] ['coords']. Lat, lng: marker.calEvent.locations [0] ['coords']. Lng}; ' – Naimad

Antwort

0

Die Position sollte mit lng nicht lon definiert werden:

var myLatLng = {lat: -25.363, lng: 131.044}; 

nicht

var myLatLng = {lat: -25.363, lon: 131.044}; 

so einfach Ihren Code ändern:

var loc = {lat: marker.calEvent.locations[0]['coords'].lat , lng: marker.calEvent.locations[0]['coords'].lng}; 

oder nur

var loc = marker.calEvent.locations[0]['coords']; 
+0

Danke, mein Herr oder Mama! – skotienos13

Verwandte Themen