Трек GPX не отображается на карте листовки - PullRequest
Новая
       85

Трек GPX не отображается на карте листовки

0 голосов
/ 07 апреля 2020

Я хотел бы отобразить карту с маркером и дорожкой, последняя загружена из файла GPX на моем локальном компьютере. Я пытался использовать плагин leaflet-gpx , но так как я совершенно новичок в листовке, геоданных, Javascript, ... я не могу понять, почему трек не появляется на карте в то время как маркер делает. Файл GPX находится в том же каталоге, что и мой HTML файл, и GPX, кажется, действителен, так как трек отображается, когда я загружаю его в онлайн-просмотрщик GPX.

Вот мой код: 

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.4.0/gpx.min.js"></script>

    <div id="mapid" style="width: 600px; height: 400px;"></div>
    <script>
    var map = L.map('mapid').setView([50.343, 8.677], 13);
      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
         maxZoom: 18,
         attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
         tileSize: 512,
         zoomOffset: -1
      }).addTo(map);

    var marker = L.marker([50.343, 8.677]).addTo(map);
    var gpx = 'tracks.gpx'; // URL to your GPX file or the GPX itself
    new L.GPX(gpx, {async: true}).on('loaded', function(e) {
      map.fitBounds(e.target.getBounds());
    }).addTo(map);
    </script>
  </body>
</html>

Выше приведен пример кода, найденного на сайте gletub leaflet-gpx, поэтому он не использует последнюю версию листовки. Я хотел бы использовать последнюю версию в будущем, но сначала я бы хотел, чтобы этот простой пример работал (я также попытался преобразовать данные в формат Geo JSON и отобразить их вместо этого, но опять-таки не повезло, поэтому я думаю, я делаю что-то в корне неправильное).

Большое спасибо за вашу помощь, любая информация о том, как я могу заставить трек появляться, приветствуется!

...