如何解决L.GPX不是构造函数
我正在寻找我的Leaflet地图中的导入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>
解决方法
您必须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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。