it-swarm.com.de

Laden einer lokalen .kml-Datei mit Google Maps?

Ich habe ein Hallo-Welt-Programm erstellt, um eine lokale kml-Datei zu laden (aus Google-Dokumenten entlehnt):

var ctaLayer = new google.maps.KmlLayer("http://localhost:8080/kml/cta.kml");

Dies funktioniert nicht (nichts wird geladen).

Wenn ich diese Zeile jedoch ändere in:

  var ctaLayer = new google.maps.KmlLayer("http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml");

es wird richtig geladen. Beide kml-Dateien sind identisch. Was muss ich tun, damit es geladen wird, wenn ich es selbst serviere? (Ich habe sowohl absolute als auch relative Pfade ausprobiert und weiß, dass die von mir verwendeten Pfade korrekt sind ...)

Außerdem habe ich der Konfigurationsdatei meines Appservers den richtigen MIME-Typ hinzugefügt:

<mime-mapping>
    <extension>kml</extension>
<mime-type>application/vnd.google-earth.kml+xml</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>kmz</extension>
    <mime-type>application/vnd.google-earth.kmz</mime-type>
</mime-mapping>

Aber es wird immer noch nicht geladen.

Ich fand das in googles docs :

Die Google Maps-API unterstützt die Datenformate KML und GeoRSS für die Anzeige von geografischen Informationen. Diese Datenformate werden auf einer Karte mithilfe eines KmlLayer-Objekts angezeigt, dessen Konstruktor die URL einer öffentlich zugänglichen KML- oder GeoRSS-Datei verwendet.

Ich denke, was ich versuche, ist nicht möglich , ohne die kml über eine öffentlich zugängliche URL zu liefern ... es sei denn, jemand kann etwas anderes beweisen

51
hddd

Auf das KML kann nicht zugegriffen werden, da es sich auf Ihrem lokalen Computer befindet und Google nicht darauf zugreifen kann, da es nicht weiß, wie es zu localhost: 8080 kommt

55
Martin Murphy

Leider kann "localhost" nicht verwendet werden. Sie haben zwei Möglichkeiten:

  1. platzieren Sie die kml auf einer öffentlich zugänglichen Domain. (Wenn Google nicht darauf zugreifen kann, funktioniert es nicht.)
  2. Verwenden Sie geoxml3, das im Grunde das tut, was Google tut, aber Ihnen erlaubt, die Parser-JS-Datei selbst herunterzuladen und zu hosten. Damit können Sie eine LOCALHOST-KML laden und für Sie analysieren (Objekte, auf die über JSON zugegriffen werden kann) ( http://code.google.com/p/geoxml3/ ).

Option 1 ist möglicherweise keine Option für Personen, die an Verteidigungsverträgen arbeiten und sensible Informationen verarbeiten, da die kml im Hintergrund an Google gesendet und auf der Karte dargestellt werden.

39
capdragon

Für diese Website ( display-kml.appspot.com ) muss die gesamte KML-Datei kopiert/in die Website eingefügt werden. Alternativ können Sie Dropbox verwenden, um die KML-Datei in Ihrem öffentlichen Ordner zu hosten. Im öffentlichen Dropbox-Ordner befindet sich ein Kontextmenü mit der rechten Maustaste, mit dem Sie die URL kopieren können.

Die Appspot-Website war in der Vergangenheit instabil. Ab Januar 2019 scheint die Website zu funktionieren.

  1. http://display-kml.appspot.com/
  2. https://www.dropbox.com/
17
Ragaar

Auf jeden Fall ist Google Maps KmlLayer so konzipiert, dass Sie Ihre Daten an sie senden können. https://developers.google.com/maps/documentation/javascript/kml

Schauen Sie sich das folgende Protokoll an.

//console
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';

var kmlLayer = new google.maps.KmlLayer(src, {
  suppressInfoWindows: true,
  preserveViewport: false,
  map: your_gmap_object
});

Erstellen Marker, Polygon, sie sind alle Browser-seitiges Parsen und Rendern.

Wie Sie aus dem nächsten Netzwerkprotokoll ersehen können, KmlLayer-Klasse senden Sie die Quell-URL an Google Server, um sie zu analysieren und das analysierte Ergebnis zum Rendern an Ihren Browser zurückzusenden.

//REQUEST from browser

https://maps.googleapis.com/maps/api/js/KmlOverlayService.GetOverlays?1shttps%3A%2F%2Fdevelopers.google.com%2Fmaps%2Fdocumentation%2Fjavascript%2Fexamples%2Fkml%2Fwestcampus.kml&callback=_xdc_._lidt3k&key=AIzaSyBeLTP20qMgxsQFz1mwLlzNuhrS5xD_a_U&token=103685

//RESPONSE from google server

/**/_xdc_._lidt3k && _xdc_._lidt3k( [0,"kml:cXOw0bjKUSmlnTN2l67v0Sai6WfXhSSWuyNaDD0mAzh6xfi2fYnBo78Y2Eg","|ks:;dc:tg;ts:51385071|kv:3|api:3",...
["KmlFile"],[[37.423017,-122.0927],[37.424194,-122.091498]],[["g74cf1503d602f2e5"],["g58e8cf8fd6da8d29"],["ge39d22e72437b02e"]],1,[["client","2"]],-21505,[["ks",";dc:tg;ts:51385071"],["kv","3"],["api","3"]]] )

Wie @capdragon oben erwähnt, ist es besser, KML selbst zu analysieren.

[~ # ~] update [~ # ~]

Hier ist kompakter KML-Parser-Code. Dies gilt nur für google.maps Marker und Polygon.

html

<input type='file' accept=".kml,.kmz" onchange="fileChanged()">

skript, ich habe TypeScript verwendet, aber es ist ziemlich gleich mit Javascript

  file: any
  fileChanged(e) {
    this.file = e.target.files[0]
    this.parseDocument(this.file)
  }
  parseDocument(file) {
    let fileReader = new FileReader()
    fileReader.onload = async (e: any) => {
      let result = await this.extractGoogleCoords(e.target.result)

      //CREATE MARKER OR POLYGON WITH result here
      console.log(result)

    }
    fileReader.readAsText(file)
  }

  async extractGoogleCoords(plainText) {
    let parser = new DOMParser()
    let xmlDoc = parser.parseFromString(plainText, "text/xml")
    let googlePolygons = []
    let googleMarkers = []

    if (xmlDoc.documentElement.nodeName == "kml") {

      for (const item of xmlDoc.getElementsByTagName('Placemark') as any) {
        let placeMarkName = item.getElementsByTagName('name')[0].childNodes[0].nodeValue.trim()
        let polygons = item.getElementsByTagName('Polygon')
        let markers = item.getElementsByTagName('Point')

        /** POLYGONS PARSE **/        
        for (const polygon of polygons) {
          let coords = polygon.getElementsByTagName('coordinates')[0].childNodes[0].nodeValue.trim()
          let points = coords.split(" ")

          let googlePolygonsPaths = []
          for (const point of points) {
            let coord = point.split(",")
            googlePolygonsPaths.Push({ lat: +coord[1], lng: +coord[0] })
          }
          googlePolygons.Push(googlePolygonsPaths)
        }

        /** MARKER PARSE **/    
        for (const marker of markers) {
          var coords = marker.getElementsByTagName('coordinates')[0].childNodes[0].nodeValue.trim()
          let coord = coords.split(",")
          googleMarkers.Push({ lat: +coord[1], lng: +coord[0] })
        }
      }
    } else {
      throw "error while parsing"
    }

    return { markers: googleMarkers, polygons: googlePolygons }

  }

ausgabe

markers: Array(3)
0: {lat: 37.42390182131783, lng: -122.0914977709329}
...

polygons: Array(1)
0: Array(88)
0: {lat: -37.79825999283025, lng: 144.9165994157198}
...
1
John