无法在 svelte 中读取未定义的属性 'addLayer'

Question

下面是我的代码。我正在使用 leaflet in svelte 绘制带有图像的地图。

<script>
  import { onMount } from "svelte";
  import L from "leaflet";
  var map;
  onMount(() => {
    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);
</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>

但我收到错误消息“无法读取未定义的属性 'addLayer'”。我该如何解决这个问题？

Answer 1

你的问题是你试图在 onMount 回调之外使用 map 所以它是 undefined 在行中：

L.imageOverlay(imageUrl, imageBounds).addTo(map);

要修复它，只需将其添加到 onMount 回调：

  onMount(() => {
    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);
  });

查看 Codesandbox。

无法在 svelte 中读取未定义的属性 'addLayer'

Cannot read property 'addLayer' of undefined in svelte

javascript

leaflet

svelte

svelte-3

无法在 svelte 中读取未定义的 属性 'addLayer'

Cannot read property 'addLayer' of undefined in svelte

javascript

leaflet

svelte

svelte-3

无法在 svelte 中读取未定义的属性 'addLayer'