在 Leaflet.js 中添加标记
Adding Markers in Leaflet.js
如果这很简单,我深表歉意,但我对此不是很有经验,并且已经通读并改编了多个示例以达到我目前所处的位置。
我正在为我 运行 的活动制作地图。我已经使用 leaflet 来做到这一点,经过大量修改后,我终于使用单个图像完成了所有工作(这是我想要的,因为它会经常更新)。
下一步是将标记添加到感兴趣的位置。现在我并不特别想要任何花哨的东西,我正在尝试使用标记和弹出窗口(如此处所示:http://leafletjs.com/examples/quick-start/example-popups.html)——但是我通过查看各种示例和教程尝试过的方法似乎并不奏效。
我将在下面粘贴我的代码,非常感谢任何能够提供帮助的人。再次,如果它真的很简单,我深表歉意,我所有有限的知识都来自阅读和调整示例。
其中大部分是使用本教程构建的:http://kempe.net/blog/2014/06/14/leaflet-pan-zoom-image.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="icon" type="image/png" href="assets/icon.ico">
<title>Whispers of Valentia</title>
<link rel="stylesheet" href="map.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Cantora+One|Acme|Meddon|Jim+Nightshade' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
</head>
<body>
<div id="navigationBar">
<div id="navigationLogo">
<abbr title="This is a test map.">WHISPERS OF VALENTIA</abbr>
</div>
</div>
<div class="shadeBar"></div>
<div id="image-map" style="background: #1e2831;">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script>
// Using leaflet.js to pan and zoom a big image.
// See also: http://kempe.net/blog/2014/06/14/leaflet-pan-zoom-image.html
// create the slippy map
var map = L.map('image-map', {
minZoom: 2,
maxZoom: 6,
center: [5000, 2400],
zoom: 2,
crs: L.CRS.Simple
});
// dimensions of the image
var w = 10000,
h = 4800,
url = 'valentiatest.jpg';
// calculate the edges of the image, in coordinate space
var southWest = map.unproject([0, h], map.getMaxZoom()-1);
var northEast = map.unproject([w, 0], map.getMaxZoom()-1);
var bounds = new L.LatLngBounds(southWest, northEast);
// add the image overlay,
// so that it covers the entire map
L.imageOverlay(url, bounds).addTo(map);
// tell leaflet that the map is exactly as big as the image
map.setMaxBounds(bounds);
var marker = L.marker([1000, 1000]).addTo(map);
</script>
</div>
</body>
您的代码似乎是正确的。
您使用以下代码添加了标记:
var marker = L.marker([1000, 1000]).addTo(map);
请注意,这会向位置添加一个标记:
纬度:1000;
经度:1000;
这不正确,不在您的地图中。
根据你的中心添加一个正确的位置来添加它。
查看 Leaflet 示例代码和文档以获取更多信息:
http://leafletjs.com/examples/quick-start/
如果这很简单,我深表歉意,但我对此不是很有经验,并且已经通读并改编了多个示例以达到我目前所处的位置。
我正在为我 运行 的活动制作地图。我已经使用 leaflet 来做到这一点,经过大量修改后,我终于使用单个图像完成了所有工作(这是我想要的,因为它会经常更新)。
下一步是将标记添加到感兴趣的位置。现在我并不特别想要任何花哨的东西,我正在尝试使用标记和弹出窗口(如此处所示:http://leafletjs.com/examples/quick-start/example-popups.html)——但是我通过查看各种示例和教程尝试过的方法似乎并不奏效。
我将在下面粘贴我的代码,非常感谢任何能够提供帮助的人。再次,如果它真的很简单,我深表歉意,我所有有限的知识都来自阅读和调整示例。
其中大部分是使用本教程构建的:http://kempe.net/blog/2014/06/14/leaflet-pan-zoom-image.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="icon" type="image/png" href="assets/icon.ico">
<title>Whispers of Valentia</title>
<link rel="stylesheet" href="map.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Cantora+One|Acme|Meddon|Jim+Nightshade' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
</head>
<body>
<div id="navigationBar">
<div id="navigationLogo">
<abbr title="This is a test map.">WHISPERS OF VALENTIA</abbr>
</div>
</div>
<div class="shadeBar"></div>
<div id="image-map" style="background: #1e2831;">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script>
// Using leaflet.js to pan and zoom a big image.
// See also: http://kempe.net/blog/2014/06/14/leaflet-pan-zoom-image.html
// create the slippy map
var map = L.map('image-map', {
minZoom: 2,
maxZoom: 6,
center: [5000, 2400],
zoom: 2,
crs: L.CRS.Simple
});
// dimensions of the image
var w = 10000,
h = 4800,
url = 'valentiatest.jpg';
// calculate the edges of the image, in coordinate space
var southWest = map.unproject([0, h], map.getMaxZoom()-1);
var northEast = map.unproject([w, 0], map.getMaxZoom()-1);
var bounds = new L.LatLngBounds(southWest, northEast);
// add the image overlay,
// so that it covers the entire map
L.imageOverlay(url, bounds).addTo(map);
// tell leaflet that the map is exactly as big as the image
map.setMaxBounds(bounds);
var marker = L.marker([1000, 1000]).addTo(map);
</script>
</div>
</body>
您的代码似乎是正确的。 您使用以下代码添加了标记:
var marker = L.marker([1000, 1000]).addTo(map);
请注意,这会向位置添加一个标记: 纬度:1000; 经度:1000;
这不正确,不在您的地图中。 根据你的中心添加一个正确的位置来添加它。
查看 Leaflet 示例代码和文档以获取更多信息: http://leafletjs.com/examples/quick-start/