Javascript 找不到地图容器带有苗条的传单

下面是我的代码。我正在用传单以苗条的方式绘制一张图表。但我得到一个错误“地图未定义”。我怎样才能解决这个问题

<script>
    import L from 'leaflet';
    let map;
    map = L.map("mapDemo", {
  minZoom: 4,
  maxZoom: 6
});

map.zoomControl.setPosition("bottomright");
var bounds = [
  [-10, -10],
  [10, 10]
];
map.fitBounds(bounds);
var markers = {
  id1: { title: "Marker 1", coords: [1, 0], description: "Text for marker 1" },
  id2: { title: "Marker 2", coords: [4, 2], description: "Text for marker 2" },
  id3: { title: "Marker 3", coords: [8, 8], description: "Text for marker 3" }
};

var layers = L.layerGroup().addTo(map);
var titlesList = [];
var idToLayer = {};
var titleToId = {};
var idToTitle = {};
var idToText = {};

var markerOnClick = function () {
  var mId = this.options.markerId;
};

$:each(markers, function (key, val) {
  var markerOptions = {
    markerId: key,
    markerTitle: val["title"],
    markerText: val["description"]
  };

  var marker = L.marker(val["coords"], markerOptions).addTo(map);
  var popupContent = val["title"];
  // Bind popup to marker click
  marker.bindPopup(popupContent);
});

</script>
  <div id="mapDemo">
  </div>

从“传单”进口L；
让地图；
map=L.map（“mapDemo”{
minZoom:4，
最大缩放：6
});
map.zoomControl.setPosition（“右下”）；
变量界限=[
[-10, -10],
[10, 10]
];
映射边界（bounds）；
变量标记={
id1:{title:“Marker 1”，坐标：[1,0]，description:“Marker 1的文本”}，
id2:{标题：“标记2”，坐标：[4,2]，描述：“标记2的文本”}，
id3:{标题：“标记3”，坐标：[8,8]，描述：“标记3的文本”}
};
var layers=L.layerGroup（）.addTo（映射）；
var titlesList=[]；
var idToLayer={}；
变量titleToId={}；
var idToTitle={}；
var idToText={}；
var markerOnClick=函数（）{
var mId=this.options.markerId；
};
$：每个（标记、功能（键、值）{
变量标记选项={
马克里德：钥匙，
标记：val[“title”]，
markerText:val[“description”]
};
var marker=L.marker（val[“coords”]，markerOptions）.addTo（map）；
var popupContent=val[“title”]；
//将弹出窗口绑定到标记单击
marker.bindpoop（popupContent）；
});

---

另外，我想添加一个图像作为背景，坐标标绘在给定的图像上。

您应该将传单初始化代码包装进去。脚本标记在元素呈现到DOM之前运行，因此mapDemo元素还不存在

我也不确定你想用

$：each

--我想你是在寻找

对象。条目（标记）。forEach（（[key，val]）=>{}）

这是带有onMount和每次重写的脚本标记

<script>
import { onMount } from 'svelte';
import L from 'leaflet';
let map;

onMount(() => {
    map = L.map("mapDemo", {
        minZoom: 4,
        maxZoom: 6
    });

    map.zoomControl.setPosition("bottomright");
    var bounds = [
        [-10, -10],
        [10, 10]
    ];
    map.fitBounds(bounds);
    var markers = {
        id1: {
            title: "Marker 1",
            coords: [1, 0],
            description: "Text for marker 1"
        },
        id2: {
            title: "Marker 2",
            coords: [4, 2],
            description: "Text for marker 2"
        },
        id3: {
            title: "Marker 3",
            coords: [8, 8],
            description: "Text for marker 3"
        }
    };
    var layers = L.layerGroup().addTo(map);
    var titlesList = [];
    var idToLayer = {};
    var titleToId = {};
    var idToTitle = {};
    var idToText = {};

    var markerOnClick = function() {
        var mId = this.options.markerId;
    };

    Object.entries(markers).forEach(([key, val]) => {
        var markerOptions = {
            markerId: key,
            markerTitle: val["title"],
            markerText: val["description"]
        };

        var marker = L.marker(val["coords"], markerOptions).addTo(map);
        var popupContent = val["title"];
        // Bind popup to marker click
        marker.bindPopup(popupContent);
    });
})
</script>

从“svelte”导入{onMount}；
从“传单”进口L；
让地图；
onMount（（）=>{
map=L.map（“mapDemo”{
minZoom:4，
最大缩放：6
});
map.zoomControl.setPosition（“右下”）；
变量界限=[
[-10, -10],
[10, 10]
];
映射边界（bounds）；
变量标记={
id1：{
标题：“标记1”，
coords:[1,0]，
描述：“标记1的文本”
},
id2：{
标题：“标记2”，
协调：[4,2]，
描述：“标记2的文本”
},
id3：{
标题：“标记3”，
coords:[8,8]，
描述：“标记3的文本”
}
};
var layers=L.layerGroup（）.addTo（映射）；
var titlesList=[]；
var idToLayer={}；
变量titleToId={}；
var idToTitle={}；
var idToText={}；
var markerOnClick=函数（）{
var mId=this.options.markerId；
};
Object.entries（markers）.forEach（[key，val]）=>{
变量标记选项={
马克里德：钥匙，
标记：val[“title”]，
markerText:val[“description”]
};
var marker=L.marker（val[“coords”]，markerOptions）.addTo（map）；
var popupContent=val[“title”]；
//将弹出窗口绑定到标记单击
marker.bindpoop（popupContent）；
});
})