Блог

Главная - Вопросы по программированию - L.GPX не является конструктором

L.GPX не является конструктором

#leaflet #gpx

#листовка #gpx

Вопрос:

я ищу файл импорта GPX внутри моей карты листовки, но когда я пытаюсь зайти на сайт, он отвечает L.GPX не является конструктором, у меня это только в голове

     <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

и что внутри тела

 <div id="map"></div>

<script>    
    var sites = {!! json_encode($markers) !!};

    var map = L.map('map').setView([{{ config('leaflet.map_center_latitude') }}, {{ config('leaflet.map_center_longitude') }}], {{ config('leaflet.zoom_level') }});
    
    L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}@2x.png?key=2Qw6dd02HLfOXS3LDGMP', {
        attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">amp;copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">amp;copy; OpenStreetMap contributors</a>'
    }).addTo(map);

    var marker;
    sites.forEach(element => {
        marker = L.marker([element[0], element[1]]).addTo(map);
    });

    var gpx = '/resources/gpx/pont.gpx'; // URL to your GPX file or the GPX itself
    
    new L.GPX(gpx, {
        async: true,
        polyline_options: {
              color: '#ff0000',
              }
        }
    ).on('loaded', function(e) {
        map.fitBounds(e.target.getBounds());
    }).addTo(map);

</script>

Ответ №1:

Вы должны загрузить плагин, прежде чем сможете его использовать:

Использование
Во-первых, включите Leaflet.js и сценарии Leaflet-GPX на вашей HTML-странице:

Как описано, добавьте следующую строку в свой заголовок или перед вашим скриптом

 <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.4.0/gpx.min.js"></script>