Как получить координаты маркера в OSM картах

109

09 июля 2019, 14:50

Есть передвижной маркер Google и при перемещении могу записать новые координаты в файл для этого использую следующий код JS

google.maps.event.addListener(p993234fc48a311e0926dd8d385b7416cMarker, 'dragend', function() {
                    document.getElementById("Position").className = p993234fc48a311e0926dd8d385b7416cMarker.position + ",993234fc-48a3-11e0-926d-d8d385b7416c";

Помогите понять, как эту функцию воплотить в OSM картах.

Answer 1

Вроде бы разобрался как выполнить данное требование с помощью слушателя dragend, теперь есть другая проблема не могу заставить работать так чтоб маркер имел координаты по умолчанию а не ставился по клику мышки. подскажите куда копать.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Leaflet demo</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
      <script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
      <link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css">
  <style id="compiled-css" type="text/css">
      #map {
    height: 600px;
    width: 90%;
}
  </style>

  <!-- TODO: Missing CoffeeScript 2 -->
  <script type="text/javascript">

    window.onload=function(){
    // We’ll add a tile layer to add to our map, in this case it’s a OSM tile layer.
    // Creating a tile layer usually involves setting the URL template for the tile images
    var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
        osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        osm = L.tileLayer(osmUrl, {
            maxZoom: 18,
            attribution: osmAttrib
        });
    // initialize the map on the "map" div with a given center and zoom
    var map = L.map('map').setView([50.371920, 30.705620], 12).addLayer(osm);
            // Script for adding marker on map click
    function onMapClick(e) {
        var marker = L.marker(e.latlng, {
            draggable: true,
            title: "Resource location",
            alt: "Resource Location",
            riseOnHover: true
        }).addTo(map).bindPopup(e.latlng.toString()).openPopup();
        // Update marker on changing it's position
        marker.on("dragend", function (ev) {
            var chagedPos = ev.target.getLatLng();
            this.bindPopup(chagedPos.toString()).openPopup();
        });
    }
    map.on('click', onMapClick);
}
</script>
</head>
<body>
    <div id="map"></div>

  <script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
  window.parent.parent.postMessage(["resultsFrame", {
    height: document.body.getBoundingClientRect().height,
    slug: "LnzN2"
  }], "*")
    }
  </script>
</body>
</html>
'