Ich versuche, die Pixelkoordinaten eines Bild-Overlays per Klick (Rechtsklick / Kontextmenu) mit Hilfe der Map-Bibliothek zu erhalten. Im Wesentlichen, wenn ein Benutzer auf das Bild klickt, muss ich die x, y oder Breite, Höhe wo der Benutzer auf das Bild geklickt hat suchen.
Momentan habe ich das.
%Vor%Momentan onMapClick (e) bei der Überprüfung der zurückgegebenen Ereignisse beim Klicken sehe ich keinen Hinweis auf alle zurückgegebenen Koordinaten irgendwo in der Nähe von x, y oder Breite und Höhe des Ortes, auf den ich geklickt habe.
Was ich am liebsten sehen möchte, ist die x, y oder Breite, die Höhe der Position des Bildes, auf das ich geklickt habe, vorausgesetzt, das Bild hat eine Größe von 20000x15000.
Hier ist die Geige Ссылка
Ich bin mir nicht sicher warum, aber es scheint ein wenig buggy zu sein, wenn Sie den gesamten Zoomfaktor vergrößern. Zoomen Sie einfach den ganzen Weg hinein, um den Bug von jsfiddle zu stoppen. Dieser Fehler steht nicht im Fokus, da er in meiner lokalen Umgebung nicht auftritt! scheint etwas mit Geige zu tun.
Das Faltblatt gibt Ihnen die Koordinaten x, y entlang des "image-map" -Divs, das sich beim Vergrößern und Verkleinern ändert. Die Ereigniskoordinaten werden nicht auf Ihre Bildgröße skaliert.
Um x, y relativ zur tatsächlichen Bildgröße zu erhalten, müssen Sie die Koordinaten mit dem Verhältnis der aktuellen div-Dimensionen und des vollständigen Bilds multiplizieren Dimensionen.
Ich habe Ihre x, y berechnet, indem ich die Koordinaten der Ereignisse genommen und sie mit var w und var h multipliziert und sie durch die Höhe und Breite der Karten geteilt habe:
Um dieses Problem zu lösen, müssen Sie das Kartenprojekt verwenden, um den Breiten- und Längengrad in Koordinaten im Bild zu konvertieren.
Die Projektmethode auf der Karte ist die Magie
Projektion gibt Ihnen das X, Y im Bild. Diese Werte werden basierend darauf gezoomt, wie das Bild skaliert wird (d. H. Der Kartenzoompegel).
Das Berechnen des natürlichen Werts (X, Y) des Klicks ist nur eine Frage des Berechnens des Maßstabsverhältnisses der Kartengrenzen oder der Überlagerungsgröße und dem anschließenden Dividieren durch die projizierten Klickkoordinaten.
Wenn Sie den imageOverlay-Speicher in einer Variablen erstellen. Sie müssen darauf verweisen, um den Skalierungsfaktor der Bildebene zu bestimmen.
Beim Klicken projizieren Sie die Länge des Klicks in (x, y) -Koordinaten
Teilen Sie die aktuelle Breite und Höhe des Bildes mit der natürlichen Breite und Höhe (Sie müssen dies tun, um die Größenänderung durch Kartenzoom zu bewältigen)
Teilen Sie die projizierten Klickkoordinaten durch den Skalierungsfaktor. Dies gibt Ihnen die tatsächlichen X, Y-Koordinaten im Originalbild zurück, was ich denke, dass Sie wollen. Code unten und prüfen Sie die Geige für Arbeitsbeispiel. Ссылка
.
%Vor%Hoffe, das hilft!
Ich weiß nichts über Flugblatt, aber Sie brauchen es nicht, um dies zu erreichen. Mit Javascript können Sie einen Listener implementieren und event.latLng in einem Marker verwenden, um die Informationen zu manipulieren.
Schau diese Arbeitsgeige
Sie erhalten containerPoint , das die x- und y-Koordinaten enthält (Container-weise), wenn Sie jetzt das Kontextmenü aufrufen. Da Sie die Dimensionen des Map-Containers kennen / abrufen können, kennen Sie die nativen Dimensionen von das Bild ... sollte das nicht ausreichen, um die Berechnungen durchzuführen?
zB Wenn Sie wissen, dass die Breite des Kartencontainers 1000px ist ... und Sie ein Kontextmenu-Ereignis mit der x-Koordinate 500 erhalten ... dann wissen Sie, dass jemand direkt in der Mitte geklickt hat, weil 500/1000 (Kartencontainerbreite) = 0.5 und das bedeutet die tatsächliche Position auf dem Bild wäre native Breite (2000, wie pro Variable w ) * 0,5 = 1000.
Tags und Links javascript google-maps-api-3 leaflet maps