Как отобразить ближайшее местоположение при перетаскивании маркера с помощью листовки? - PullRequest
Новая
       0

Как отобразить ближайшее местоположение при перетаскивании маркера с помощью листовки?

0 голосов
/ 01 ноября 2019

У меня есть js и php скрипты для отображения текущего местоположения и ближайшего местоположения с использованием leafletjs. Я хочу отобразить ближайшее местоположение, когда маркер перетаскивается. ближайшая локация вызывается из базы данных mysql.

Сценарий, который я сделал, приведен ниже. после запуска карта не появляетсяenter image description here

<?php include('../env_con.php'); ?>
<!DOCTYPE html>
<html>
<head>
  <title>Test Nearby</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>
  <script src="https://unpkg.com/esri-leaflet@2.2.3/dist/esri-leaflet.js" integrity="sha512-YZ6b5bXRVwipfqul5krehD9qlbJzc6KOGXYsDjU9HHXW2gK57xmWl2gU6nAegiErAqFXhygKIsWPKbjLPXVb2g==" crossorigin=""></script>
  <link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@2.2.13/dist/esri-leaflet-geocoder.css" integrity="sha512-v5YmWLm8KqAAmg5808pETiccEohtt8rPVMGQ1jA6jqkWVydV5Cuz3nJ9fQ7ittSxvuqsvI9RSGfVoKPaAJZ/AQ==" crossorigin="">
  <script src="https://unpkg.com/esri-leaflet-geocoder@2.2.13/dist/esri-leaflet-geocoder.js" integrity="sha512-zdT4Pc2tIrc6uoYly2Wp8jh6EPEWaveqqD3sT0lf5yei19BC1WulGuh5CesB0ldBKZieKGD7Qyf/G0jdSe016A==" crossorigin=""></script>
  <link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
  <style>
    #map_ku {
      height: 480px;
    }
  </style>
</head>
<body>
  <form>
    <label>Latitude :</label>
    <input type="text" id="lat" name="lat" required>
    </br>
    <label>Longitude :</label>
    <input type="text" id="lng" name="lng" required>
    </br>
    <label>Address :</label>
    <input type="text" id="address" name="address">
  </form>
  <div id="map_ku"></div>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  navigator.geolocation.getCurrentPosition(function(location) {
    var latlng = new L.LatLng(location.coords.latitude, location.coords.longitude);

    document.getElementById('lat').value = location.coords.latitude;
    document.getElementById('lng').value = location.coords.longitude;

    var mymap = L.map('map_ku').setView(latlng, 18)
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
      maxZoom: 19,
    }).addTo(mymap);

    var MyIcon = L.Icon.extend({
      options: {
        shadowUrl: 'leaf-shadow.png',
        iconSize: [12, 12],
        shadowSize: [50, 64],
        iconAnchor: [7, 10],
        shadowAnchor: [4, 62],
        popupAnchor: [-1, -10]
      }
    });

    var MyIcon2 = L.Icon.extend({
      options: {
        shadowUrl: 'leaf-shadow.png',
        iconSize: [18, 18],
        shadowSize: [50, 64],
        iconAnchor: [7, 10],
        shadowAnchor: [4, 62],
        popupAnchor: [-1, -10]
      }
    });

    var greenIcon = new MyIcon2({
      iconUrl: 'images/markerred.png'
    })
    var ballIcon = new MyIcon({
      iconUrl: 'images/ballorange.png'
    })

    L.icon = function(options) {
      return new L.Icon(options);
    };

    var marker = L.marker(latlng, {
      draggable: true
    }).addTo(mymap);

    marker.on('dragend', function(e) {
      document.getElementById('lat').value = marker.getLatLng().lat;
      document.getElementById('lng').value = marker.getLatLng().lng;
      var vLat = marker.getLatLng().lat;
      var vLong = marker.getLatLng().lng;
      <?php

                $distance = 0.2;
                $query_nearby="SELECT * FROM (
                SELECT *, 
                    (
                        (
                            (
                                acos(
                                    sin(( $vLat * pi() / 180))
                                    *
                                    sin(( lat * pi() / 180)) + cos(( $vLat * pi() /180 ))
                                    *
                                    cos(( lat * pi() / 180)) * cos((( $vLong - lng) * pi()/180)))
                            ) * 180/pi()
                        ) * 60 * 1.1515 * 1.609344
                    )
                as distance FROM collect) collect WHERE distance <= $distance and (status='submitted' or status='approved')";



                $query = mysqli_query($connect, $query_nearby) or die(msqli_error());

                $js = '';

                while($row = mysqli_fetch_assoc($query)) {
                    $js .= 'L.marker(['.$row['lat'].', '.$row['lng'].'],{icon: ballIcon}).addTo(map)
                        .bindPopup("<b>'.$row['poi_name'].'</b>");';
                }

                echo $js;

         ?>
    });

    //var marker = L.marker(latlng).addTo(mymap);
    var geocodeService = L.esri.Geocoding.geocodeService();

    marker.on('click', function(e) {
      geocodeService.reverse().latlng(e.latlng).run(function(error, result) {
        if (error) {
          return;
        }
        document.getElementById('address').value = result.address.Match_addr;

      });
    });
  });
  var popup = L.popup();
</script>
</html>

Ссылка на Hastebin

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...