下面是我的代码。我正在用一张传单画一张用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>
此外,我想添加一个图像作为背景,坐标绘制在给定的图像上。
您应该将传单初始化代码包装在onmount中。脚本标记在元素呈现到DOM之前运行,因此mapDemo元素还不存在。
我也不确定您要用$:each
做什么--我想您要找的是object.entries(标记).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>
问题内容: 我有下面的react类,可通过浏览器获取地理位置。 我正在绘制传单地图。我想将地理位置作为setView的输入,以使地图“缩放”到客户端浏览器位置的区域。 这是react类: 在主文件中调用该文件,其中HTML呈现为。 加载页面时出现错误。环顾四周,通常是因为地图试图在提供值之前在div中显示(在这种情况下为(gelocation,3))。但是,在从下面的渲染函数返回之前,它不应该显示
问题内容: 两者之间到底有什么区别 和 第一个只是加快字段初始化速度的捷径吗?有性能方面的考虑吗? 问题答案: 第二种形式总是创建一个空的地图。 第一种形式是地图文字的特殊情况。地图文字允许创建 非空 地图: 现在,您的(通用)示例: 是没有初始值(键/值对)的地图文字。它完全等同于: 此外,这是为地图指定初始容量(大于初始分配的元素数量)的唯一方法。例: 将创建一个地图,该地图具有足够的空间来容
问题内容: 我想做一个需要集成Google MapsAPI的项目。我需要自动完成,本地化并在地图上绘制路线。我该如何用angular做到这一点,您可以为此推荐一个库吗?或者我该如何使用javascript的GoogleMapsAPI做到这一点。该项目是使用yeoman-fullstack生成的。 谢谢。 问题答案: 首先,如果您想让 AngularJS使用* Google Maps API ,则有
我有一个多模块maven项目,我对javaFx有问题(我使用了zenJava插件)。 当我想要构建jar时,我有一个错误:无法执行目标com。zenjava:javafx maven插件:8.8.3:在项目XXXX上构建jar(默认cli):目标com的参数“mainClass”。zenjava:javafx maven插件:8.8.3:build jar缺失或无效 但是,我在父pom中定义了ma
我想从这个网站上提取红色标记的信息。 本站的html文本由以下图片呈现。我要提取的信息再次被红色标记。 问题是我找不到带有class属性“find-元素”的div元素。我的代码看起来像这样 如果有人能帮我,那就太好了。 谢谢。
有人能告诉我为什么下面的代码不返回表情符号属性吗... 但是下面的代码将返回一个表情符号属性... 我知道我已经将滚动添加到第二个代码中,所以它会查看整个页面并返回我要查找的元素。但除此之外,它们或多或少是相同的。我可以每隔几秒钟运行第一个代码,它永远找不到表情符号元素。它会发现代码和optCriteria没有问题,并将它们作为tradeCriteria打印在一起,但即使它在那里,它也永远找不到表