找不到带有 svelte 的传单的地图容器
map container not found Leaflet with svelte
下面是我的代码。我正在使用传单以苗条的方式绘制图表。但是我收到一个错误“地图未定义”。我该如何解决这个问题?
<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>
此外,我想添加一个图像作为背景,坐标绘制在给定图像上。
您应该将 Leaflet 初始化代码包装在 onMount 中。脚本标记在元素呈现给 DOM 之前运行,因此 mapDemo 元素尚不存在。
我也不确定你想用 $:each
做什么 -- 我认为你正在寻找 Object.entries(markers).forEach(([key, val]) => {})
。
这是你的带有 onMount 的脚本标签,并且 each 都被重写了。
<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>
下面是我的代码。我正在使用传单以苗条的方式绘制图表。但是我收到一个错误“地图未定义”。我该如何解决这个问题?
<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>
此外,我想添加一个图像作为背景,坐标绘制在给定图像上。
您应该将 Leaflet 初始化代码包装在 onMount 中。脚本标记在元素呈现给 DOM 之前运行,因此 mapDemo 元素尚不存在。
我也不确定你想用 $:each
做什么 -- 我认为你正在寻找 Object.entries(markers).forEach(([key, val]) => {})
。
这是你的带有 onMount 的脚本标签,并且 each 都被重写了。
<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>