传单图像覆盖在 Svelte 中不起作用答案

【问题标题】：Leaflet image overlay not working in Svelte传单图像覆盖在 Svelte 中不起作用
【发布时间】：2022-03-01 18:28:35
【问题描述】：

我正在尝试在传单中添加图像作为叠加层，但它给了我空白地图。整个想法是在给定图像上绘制 x,y 值。我正在尝试为此使用 imageoverlay。这是我的代码。

<script>
  import { onMount } from "svelte";
  import L from "leaflet";
  onMount(() => {
    var map = L.map("issmap").setView([51.505, -0.09], 13);

    var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
        imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];
    L.imageOverlay(imageUrl, imageBounds).addTo(map);

    L.marker([51.5, -0.09])
      .addTo(map)
      .bindPopup("A")
      .openPopup();
  });
</script>


<html lang=en>
    <head>
        <link
          rel="stylesheet"
          href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
          integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
          crossorigin=""
        />
        <script
          src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
          integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
          crossorigin=""
        ></script>
        <style>
          #issmap {
            height: 180px;
          }
        </style>
    </head>
    <body>
        <div id="issmap">
        </div>
    </body>
</html>

添加标记后的输出如下所示：

我怎样才能让它工作？

【问题讨论】：

标签： javascript leaflet svelte svelte-3

【解决方案1】：

你错误地使用了 head 标签，svelte 有一个特殊的标签来处理 html 中的 window、head 或 body，在这种情况下你必须使用 svelte:head 如果你可以在其中导入任何 cdn。查看 svelte API svelte:head documentation 中的文档

【讨论】：

谢谢。但我仍然不能将给定的图像作为地图。这是代码https://svelte.dev/repl/663828f827e94b27b4afe59334e3b51f?version=3.35.0的链接