L.GPX 不是构造函数

Posted 2023-03-29

【中文标题】L.GPX 不是构造函数

【英文标题】：L.GPX is not a constructor

【发布时间】：2021-01-11 23:08:36

【问题描述】：

我正在我的传单地图中寻找导入 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/[e-mail]?key=2Qw6dd02HLfOXS3LDGMP', 
        attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&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】：

你必须load the plugin before you can use it:

用法 首先，在 html 中包含 Leaflet.js 和 Leaflet-GPX 脚本 页面：

如上所述，在标题中或脚本之前添加以下行

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