Leaflet 圖像覆蓋在苗條中不起作用

Question

我正在嘗試在 leaflet 中添加圖像作為疊加層，但它給了我空白的 map。 整個想法是給定圖像上的 plot 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>

當我添加標記時，output 看起來像這樣

我怎樣才能讓它工作？

Answer 1

您以錯誤的方式使用了 head 標簽，svelte 有一個特殊標簽用於處理 html 中的 window、head 或 body，在這種情況下，您必須使用 svelte:head 如果您可以在其中導入任何 cdn。 查看 svelte API svelte:head 文檔中的文檔

Leaflet 圖像覆蓋在苗條中不起作用

問題描述

1 個解決方案

解決方案1
0 2021-03-08 20:03:30

Leaflet 圖像覆蓋在苗條中不起作用

問題描述

1 個解決方案

解決方案1 0 2021-03-08 20:03:30

解決方案1
0 2021-03-08 20:03:30