时间戳

首页 > 解决方案 > 传单图像覆盖在 Svelte 中不起作用

javascript - 传单图像覆盖在 Svelte 中不起作用

问题描述

我正在尝试在传单中添加图像作为叠加层，但它给了我空白地图。整个想法是在给定图像上绘制 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>

当我添加标记时，输出如下所示：

图片

我怎样才能让它工作？

标签： javascriptleafletsveltesvelte-3

解决方案

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

推荐阅读