Auf einer OSM-Karte per verschiebbarem Marker Koordinate eines Ortes auslesen

Communities Deutschland (Germany)
, ,
1

Zweck: In einem Webformular geben Teilnehmer ihre Kontaktdaten ein.
Zusätzlich sollen sie in einer OSM-Karte mit einem verschiebbaren Marker ihren Standort eingeben. Die WGS84-Koordinate des Markers wird ausgelesen und im Teilnehmer-Formular automatisch ergänzt.

Gesucht: passender HTML/PHP/JS-Code

Siehe auch: Koordinate per Klick oder verschieben Marker aus Karte auslesen

2

Das ist mit der Javascript-Bibliothek Leaflet ganz einfach, siehe das letze Beispiel im Quick Start Guide.

Beispiel:Markerkoordinaten -> Eingabefeld

Relevanter Javascript-Code:

var lng = 6.96147;      // Längenangabe
var lat = 49.229018;    // Breitenangabe
var zoom = 13;          // Zoomstufe

// Funktion, die die Koordinaten in das Formularfeld mit der übergebenen id schreibt
function addToTextBox(id, lat, lng) {
	document.getElementById(id).value = lat + ', ' + lng;
}

// Erzeuge ein Map-Objekt  an der gewünschten Position und in der gewünschten Zoomstufe
var map = new L.map('map').setView([lat, lng], zoom);        

// und füge einen Tile-Layer hinzu
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

// Erzeuge einen Marker an der angegebenen Position, der verschiebbar ist
var marker = L.marker([lat, lng], {
	draggable:'true'
});

// Nach dem Verschieben schreibe die Koordinaten in das Eingabefeld
marker.on('dragend', function(event) {
	var marker = event.target;
	var location = marker.getLatLng();
	var lat= location.lat;
	var lon = location.lng;
    // Mein Formularfeld hat die id="koordinaten"
	addToTextBox('koordinaten', lat, lon);
});
marker.addTo(map);
3

Zweck: In einem Webformular geben Teilnehmer ihre Kontaktdaten ein.
Zusätzlich sollen sie in einer OSM-Karte mit einem verschiebbaren Marker ihren Standort eingeben. Die WGS84-Koordinate des Markers wird ausgelesen und im Teilnehmer-Formular automatisch ergänzt.

Gesucht: passender HTML/PHP/JS-Code

so was in der Art wird hier gemacht https://github.com/osmlab/onosm.org