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>
另外,我想添加一个图像作为背景,坐标绘制在给定的图像上。
解决方案
您应该将 Leaflet 初始化代码包装在onMount中。script 标签在元素被渲染到 DOM 之前运行,所以 mapDemo 元素还不存在。
我也不确定你想要做什么$:each
——我认为你正在寻找Object.entries(markers).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>
推荐阅读
- python - 旋转 x-ticks matplotlib
- php - PHP Mailer [escapeshellcmd() 出于安全原因已被禁用]
- javascript - JS过滤功能问题
- node.js - nodejs 中的 post 请求不返回任何护照身份验证
- ios - Godot 导出到 IOS 失败
- java - 与 Postman 相比,CloseableHttpClient 的预期性能是多少
- javascript - 如何从字典中制作 JSON 对象?
- javascript - chrome扩展链接不显示背景
- excel - 在 Excel 中创建目录的论坛
- delphi - Delphi 错误“E2064 左侧无法分配给”64 位