我正在使用 Filament 管理面板开发 Laravel 应用程序。我正在尝试集成 Leaflet 和 Leaflet Control Geocoder 插件来显示地图和地理编码地址。
但是，当我尝试使用 L.Control.Geocoder 时，我在控制台中遇到“geocoder undefined”错误。
这是我的 Blade 模板的相关部分：
<!-- Blade Template -->
<x-filament::page>
<!-- Head section -->
<head>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Select2 JS and CSS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css"/>
<!-- Leaflet JS and CSS -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
<!-- Leaflet Control Geocoder JS and CSS -->
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"/>
</head>
<!-- Body content -->
<div id="map" style="height: 400px;"></div>
<!-- Scripts -->
<script>
document.addEventListener('DOMContentLoaded', function () {
// Initialize the map
var map = L.map('map').setView([51.505, -0.09], 13);
var marker;
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Attempt to use the geocoder
console.log(L.Control.Geocoder); // Outputs undefined
if (L.Control.Geocoder) {
var geocoder = L.Control.Geocoder.nominatim();
// Additional code...
} else {
alert('Geocoder plugin could not be loaded.');
}
});
</script>
</x-filament::page>
我已在头部包含所有必要的脚本和样式，并且它们的顺序正确。
我怀疑这个问题可能与 Laravel Filament 如何处理资源加载和渲染有关。
我尝试过的：
确保脚本和样式按正确的顺序包含。 在页面类中使用了Filament的资源管理方法，例如getHeaderScripts()和getHeaderStyles()。 检查浏览器控制台是否存在与脚本加载相关的任何错误。 尝试记录 L.Control.Geocoder 以查看它是否已定义。 尽管做出了这些努力，问题仍然存在。控制台记录 L.Control.Geocoder 未定义，并且地理编码器功能不起作用。
问题：
如何在 Laravel Filament 应用程序中正确包含和使用 Leaflet Control Geocoder 插件？使用 Filament 时是否有加载外部脚本和样式的特定方法？
Blade 模板内的某个部分未将脚本和样式放置在需要的位置。相反，如果您使用 Blade 的 @push 指令将您的资源注入页面的正确部分，将会有所帮助。
像这样：
<x-filament::page>
<div id="map" style="height: 400px;"></div>
</x-filament::page>
@push('head')
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
<!-- Leaflet Control Geocoder CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"/>
<!-- Select2 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css"/>
@endpush
@push('scripts')
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<!-- Leaflet JS -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<!-- Leaflet Control Geocoder JS -->
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Initialize the map
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Use the geocoder
if (L.Control.Geocoder) {
var geocoder = L.Control.Geocoder.nominatim();
// Additional code...
} else {
alert('Geocoder plugin could not be loaded.');
}
});
</script>
@endpush