Wie kann ich SVG-Diagramme in Google Maps überlagern?

Hier sind einige Neuigkeiten (ich hoffe, es ist besser, legen Sie Sie hier in einer Antwort, statt der Bearbeitung meiner Fragen oder erstellen eine neue Frage. Bitte fühlen Sie sich frei, um es zu verschieben, wenn nötig, oder um mir zu sagen, so wie ich das beheben kann):

Mein problem war Folgendes:

var oldmap = new GGroundOverlay("test.svg", boundaries);
map.addOverlay(oldmap);

funktionierte nicht auf Safari 3, Firefox und Opera (IE ist nicht zu aktivieren, um zu zeichnen, SVG).

In der Tat, dieser code produzieren Sie die Einfügemarke (in einem <div>) das folgende element

<img src="test.svg" style=".....">

Und Safari 4 ist in der Lage zu zeichnen Sie eine SVG-Datei als Bild, aber das ist nicht die Art und Weise zu tun, für die anderen browser. Die Idee ist also nun, zum erstellen einer benutzerdefinierten overlay für die SVG, wie bereits erläutert,hier.

Das ist der Grund, warum ich gefragt diese Frage (tut mir Leid, aber von HTML/javascript sind nicht meine stärksten Punkte).

Und da ist ein kleiner bug, der mit Webkit zum Rendern der SVG mit transparentem hintergrund mit <object>element, ich <object> oder <img> entsprechend an den browser (ich mag das nicht, aber... für den moment, es ist immer noch die quick-and-dirty-versuche)

So begann ich mit diesem code (noch in Arbeit):

//create the object
function myOverlay(SVGurl, bounds)
{
    this.url_ = SVGurl;
    this.bounds_ = bounds;
}

//prototype
myOverlay.prototype = new GOverlay();

//initialize
myOverlay.prototype.initialize = function(map)
{
    //create the div
    var div = document.createElement("div");
    div.style.position = "absolute";
    div.setAttribute('id',"SVGdiv");
    div.setAttribute('width',"900px");
    div.setAttribute('height',"900px");

    //add it with the same z-index as the map
    this.map_ = map;
    this.div_ = div;

    //create new svg root element and set attributes
    var svgRoot;
    if (BrowserDetect.browser=='Safari')
    {
        //Bug in webkit: with <objec> element, Safari put a white background... :-(
        svgRoot = document.createElement("img");
        svgRoot.setAttribute("id", "SVGelement");
        svgRoot.setAttribute("type", "image/svg+xml");
        svgRoot.setAttribute("style","width:900px;height:900px");
        svgRoot.setAttribute("src", "test.svg");
    }
    else //if (BrowserDetect.browser=='Firefox')
    {
        svgRoot = document.createElement("object");
        svgRoot.setAttribute("id", "SVGelement");
        svgRoot.setAttribute("type", "image/svg+xml");
        svgRoot.setAttribute("style","width:900px;height:900px;");
        svgRoot.setAttribute("data", "test.svg");
    }


    div.appendChild(svgRoot);
    map.getPane(G_MAP_MAP_PANE).appendChild(div);

    //this.redraw(true);
} 

...

Den draw Funktion ist noch nicht geschrieben.

Ich habe noch ein problem (ich langsam Fortschritte, Dank dem, was ich Lesen/lernen überall, und Dank auch an Menschen, die meine Fragen beantworten).

Nun, das problem ist Folgendes : mit der <object> tag, die Karte ist nicht ziehbar. Alle über die <object> element, der Mauszeiger ist nicht die "hand-Symbol" ziehen Sie die Karte, aber nur die normalen Zeiger.

Und habe ich nicht herausfinden können, wie diese zu beheben. Sollte ich eine neue Maus-Ereignis (ich sah nur die Maus-Ereignis aus, wenn ein Klick oder einem Doppel-klicken Sie auf " Anhängen, aber nicht für das ziehen der Karte...) ?

Oder gibt es einen anderen Weg, um diese Ebene für die Erhaltung der drag-Fähigkeit ?

Danke für deine Kommentare und Antworten.

PS: ich versuche auch hinzufügen, indem man die Elemente der SVG, aber... in der Tat... ich weiß nicht, wie Sie in den DOM-Baum. In dieses Beispieldie SVG wird gelesen und analysiert, mit GXml.parse()und alle Elemente mit einem bestimmten tag-Namen sind erhalten (xml.documentElement.getElementsByTagName) und Hinzugefügt, um die SVG-Knoten (svgNode.appendChild(node)). Aber in meinem Fall, ich brauche, um direkt hinzuzufügen, die SVG/XML-Struktur (hinzufügen aller Elemente ist), und es gibt verschiedene tags ( <defs> , <g><circle><path> usw.). Es ist vielleicht einfacher, aber ich weiß nicht, wie zu tun ist.. 🙁

InformationsquelleAutor der Antwort ThibThib

Diese Frage wurde bereits kurz auf die Google Maps API-Gruppe. Hier ist, was Sie sagte:

Ich habe es nicht ausprobiert, aber SVG ist eine Teilmenge
von XML, also können Sie Sie Lesen mit
GDownloadUrl() und analysieren Sie mit
GXml.parse(). Auf einige wonky Webserver
Sie müssen möglicherweise zum ändern der Datei
Erweiterung zu XML.

Haben Sie dann kriechen durch die XML
DOM, das schreiben der SVG, die Sie finden
mit dem Dokument.createElementNS() und
.setAttribute() aufruft...

Gibt es auch ein paar Google Maps SVG-Beispiele hier und hier.

Glück!

InformationsquelleAutor der Antwort Chris B