leaflet - L.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">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© 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>
解决方案
您必须先加载插件,然后才能使用它:
用法
首先,在您的 HTML 页面中包含 Leaflet.js 和 Leaflet-GPX 脚本:
如上所述,在标题中或脚本之前添加以下行
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.4.0/gpx.min.js"></script>
推荐阅读
- javascript - 数据表即使填满数据仍然显示无数据
- intel - 英特尔 SGX 服务提供商
- laravel - Eloquent hasManyThrough 也获取中间表信息
- sas - 如何在sas中读取dbf文件?
- c# - ASP .NET MVC CORE 中的 Ws 联合
- rust - HashMap 的可变借用和生命周期省略
- wpf - 如何在 Wpf 中为 Kendo RadTreeView 添加或(覆盖默认值)悬停和选择样式
- ios - Swift:更优雅的方式来编写这个数组映射?
- reactjs - 在 Firebase 数据库更改并返回其初始状态后,反应状态未(重新)设置
- reactjs - 自己的 dataTable 的 sortFunction