Google Maps API data.setStyle zeigt keine Symbole auf Karte

Ich versuche, eine kleine App mit der Google Maps JS API zu erstellen. Ich verwende die Datenebene, um eine Reihe von Punkten aus einer GeoJSON-Datei zu laden. Die Datei scheint korrekt zu laden, und die Karte wird angezeigt, aber die Symbole, die in map.data.setstyle() festgelegt sind, werden nicht angezeigt ...Google Maps API data.setStyle zeigt keine Symbole auf Karte

Im Folgenden finden Sie meine HTML, CSS und JS. Ich habe das 2 Tage lang angeschaut, und ich kann nicht herausfinden, was falsch läuft. Vielen Dank im Voraus!

HTML

<body> 
    <div id="map-canvas"></div> 
</body>

CSS

html { 
    height: 100% 
} 

body { 
    height: 100%; 
    margin: 0; 
    padding: 0 
} 

#map-canvas { 
    height: 100% 
}

$(document).ready(function() { 
    var map; 

    function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(37.000, -120.000), 
     zoom: 7 
    }; 

    map = new google.maps.Map(document.getElementById("map-canvas"), 
     mapOptions); 

    map.data.loadGeoJson('/map.json'); 
    map.data.setStyle(function(feature) { 
     var theaterName = feature.getProperty('name'); 
     return { 
     icon: "https://maps.gstatic.com/mapfiles/ms2/micons/marina.png", 
     visible: true, 
     clickable: true, 
     title: theaterName 
     }; 
    }); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 

});

JSON

{ 
    "type": "FeatureCollection", 
    "features": [ 
    { 
    "type": "Feature", 
    "properties": { 
    "rentrak_id": "9183", "name": "Palm Theatre", "address": "817 Palm St, San Luis Obispo, CA"}, 
    "geometry": { 
    "type": "Point", 
    "coordinates": [35.2815558, -120.6638196] 
    } 
}, 
{ 
"type": "Feature", 
"properties": { 
    "rentrak_id": "8961", "name": "King City 3", "address": "200 Broadway St, King City, CA"}, 
"geometry": { 
    "type": "Point", 
    "coordinates": [36.21372, -121.1261771] 
} 
}, 
{"type": "Feature", "properties": { 
"rentrak_id": "5549", "name": "Van Buren 3 DI", "address": "3035 Van Buren Blvd, Riverside, CA"}, 
"geometry": { 
"type": "Point", 
"coordinates": [33.9113137, -117.4364228] 
}}, 
{"type": "Feature", "properties": { 
"rentrak_id": "990802", "name": "CGV Cinemas LA", "address": "621 S Western Ave, Los Angeles, CA"}, 
"geometry": { 
"type": "Point", 
"coordinates": [34.0626656, -118.3093961] 
}}, 
{"type": "Feature", "properties": { 
"rentrak_id": "5521", "name": "Rancho Niguel 7", "address": "25471 Rancho Niguel Rd, Laguna Niguel, CA"}, 
"geometry": { 
"type": "Point", 
"coordinates": [33.5560509, -117.68533] 
}}]}

EDIT ::

Also, mein Skript funktioniert, wenn ich diese Datei: http://earthquake.usgs.gov/earthquakes/feed/geojsonp/2.5/week

Was ich da macht denke, dass etwas falsch mit meiner lokalen JSON-Datei ist ... aber wenn ich durch die JavaScript-Schritt, Ich kann jedes Feature betrachten und nach den Eigenschaften und Geometrien suchen, und sie scheinen korrekt in die google.maps.feature-Objekte geladen zu sein. Ich habe also immer noch keine Ahnung, warum die Punkte nicht auftauchen würden.

Quelle

2014-03-31 chez.mosey

Ihr Skript, so wie es ist, funktioniert wie erwartet, bitte erstellen Sie eine Demo oder einen Beitrag 'map.json' –

Mit Ihrem Skript und Ihrer JSON-Datei hat jede Funktion den richtigen Breitengrad und die falsche Länge, die auf -90 gesetzt ist. Zumindest sehe ich das in console.log –

Blahh !! Vielen Dank! Ja, die Längen- und Breitengrade sind in der falschen Reihenfolge .. so dass nichts angezeigt wurde. –

Die Koordinaten müssen in Längengrad und Breitengrad im Geojson sein ... SO SILLY !!!Schätze, das ist eine gute Lektion, wenn man die Dokumentation gründlich liest.

Quelle

2014-04-01 16:57:04

Unglaublich! Die Punktkoordinate ist rückwärts von allen anderen Anwendungsfällen! – Spidey

Ich glaube, Sie definieren die Markierungen, aber nur nicht die Karte mit ihnen zu setzen.

Versuchen: theaterName.setMap (Karte);

Um die Markierungen auf der Karte zu setzen.

Quelle

2014-04-01 01:13:13 avalente1

Eigentlich verwende ich keine Marker. Ich versuche, die neue Google Maps-Datenebene zu verwenden, um eine Menge Geodaten gleichzeitig mit .loadGeoJson zu laden. theaterName ist nur eine Zeichenfolge, kein Marker, also glaube ich nicht, dass dies das Problem ist. –

Sie verwenden boolesche Werte als Zeichenfolgen: 'true' anstelle von true. So rufen zu setStyle sein sollte:

map.data.setStyle(function(feature) { 
    var theaterName = feature.getProperty('name'); 
    return { 
    icon: "https://maps.gstatic.com/mapfiles/ms2/micons/marina.png", 
    visible: true, 
    clickable: true, 
    title: theaterName 
    }; 
});

Update: Ihre JSON-Datei lat/lng Koordinaten umgeschaltet hat. Es sollte

"coordinates": [-118.3093961, 34.0626656]

statt

"coordinates": [34.0626656, -118.3093961]

sein Das war der Grund, warum ich Objekte bekam die xy, -90 Werte haben.

Siehe GeoJSON specs: Die Reihenfolge der Elemente muss der Reihenfolge x, y, z folgen (Rechtswert, Hochwert, Höhe für Koordinaten in einem projizierten Koordinatensystem oder Länge, Breite, Höhe für Koordinaten in einem geographischen Koordinatensystem) .

Also Google Maps API verwendet lat/lng, für GeoJSON Dateikoordinaten sollte es lng/lat sein.

Quelle

2014-04-01 07:35:34

Das ist natürlich richtig, aber wird das Skript nicht brechen. Die API hat offensichtlich den Typ der booleschen Werte nicht überprüft, eine Zeichenkette '' wahr '' wird als boolesche 'wahr' ausgewertet, so dass sie nur ein unerwünschtes Ergebnis mit der Zeichenkette '' falsch '' ergeben würde als boolesche 'true' ausgewertet werden) –

Ich habe versucht, die Strings zu ändern, aber leider hat das Problem nicht behoben. Ich werde meine JSON-Datei veröffentlichen. –

Google Maps API data.setStyle zeigt keine Symbole auf Karte

Antwort

Verwandte Themen