代码之家 › 专栏 › 技术社区 › Cheat Bot

Svelte和传单插件未正确导入

leaflet.markercluster sveltekit svelte leaflet

0

Cheat Bot · 技术社区 · 3 年前

我想给传单添加各种插件,比如:leaflet.markercluster。
在互联网上,我发现了一个让传单在svelte上工作的例子,我注意到传单是通过异步功能导入的。

这是我的Map.svelte组件:

<script>
    import { onMount, onDestroy } from 'svelte';
    import { browser } from '$app/environment';

    let mapElement;
    let map;
    let markers = [
        { lat: 51.5, lng: -0.09, popupText: 'a' },
        { lat: 51.51, lng: -0.1, popupText: 'b' },

    ];

    onMount(async () => {
        if (browser) {
            const leaflet = await import('leaflet');
            await import('leaflet.markercluster');

            map = leaflet.map(mapElement).setView([51.505, -0.09], 13);

            leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);

            // Create marker cluster group
            const markerClusterGroup = leaflet.markerClusterGroup();
            
            // Loop through the markers array and create individual markers
            markers.forEach(marker => {
                const { lat, lng, popupText } = marker;
                const individualMarker = leaflet.marker([lat, lng]).bindPopup(popupText);
                markerClusterGroup.addLayer(individualMarker);
            });

            // Add the cluster group to the map
            map.addLayer(markerClusterGroup);
        }
    });

    onDestroy(async () => {
        if (map) {
            console.log('Unloading Leaflet map.');
            map.remove();
        }
    });
</script>


<main>
    <div bind:this={mapElement}></div>
</main>

<style>
    @import 'leaflet/dist/leaflet.css';
    @import 'leaflet.markercluster/dist/MarkerCluster.css';
    @import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
    main div {
        height: 800px;
    }
</style>

当我试图对leaflet.markcluster做同样的事情时,它不起作用。我做错了什么?

编辑

我尝试插入{#wait}块,但它没有改变任何内容。现在是+page.svelt

<script>
    import Map from "./Map.svelte";
</script>

<h1>Mappona</h1>
{#await Map}
    Loading...
{:then Map}
    <Map />
{/await}

错误未捕获(承诺中)TypeError:leaflet.markClusterGroup不是函数在Map.svelte:25:48

0 回复 | 直到 3 年前

1

CuriousCI 3 年前

而不仅仅是进口 await import('leaflet.markercluster'); ,您应该给它一个名称: const markercluster = await import('leaflet.markercluster');

并尝试直接实例化 MarkerClusterGroup 班 const markerClusterGroup = new markercluster.MarkerClusterGroup();

我应该检查一下为什么它没有添加 markerClusterGroup() 函数到 leaflet ,但这是一个很好的临时解决方案。

如果您检查 GitHub repo ,该函数只是构造函数的代理,您可以直接使用它。

2

0

Carlos Torrecillas 2 年前

在我的情况下,如果这有任何用处的话,我在动态导入方面也遇到了问题,我必须执行以下操作:

const L = await import('leaflet');
await import('leaflet.markercluster');

然后我不得不使用 window 用于创建市场集群组的变量:

const groups = window.L.markerClusterGroup();

我就是这样让它工作的。注意,我使用的是Angular,但我只在浏览器中执行这段代码。

包版本:

"leaflet": "^1.9.4",
"leaflet.markercluster": "^1.5.3",

"@types/leaflet": "1.9.8",
"@types/leaflet.markercluster": "^1.5.4",

希望这也有帮助。