在 Leaflet.js 中添加标记

Question

I apologise if this is simple but I am not very experienced with this and have read through and adapted multiple examples to get to the point that I'm currently at.如果这很简单，我深表歉意，但我对此不是很有经验，并且已经通读并改编了多个示例以达到我目前所处的地步。

I'm making a map for a campaign that I'm running.我正在为我正在运行的活动制作地图。 I've used leaflet to do this, and after a lot of tinkering I finally got it all working using a single image (which is what I want as it'll be updated a lot).我已经使用传单来做到这一点，经过大量修补后，我终于使用单个图像完成了所有工作（这是我想要的，因为它将被大量更新）。

The next step is to add markers to locations of interest.下一步是将标记添加到感兴趣的位置。 Now I don't particularly want anything fancy, I was attempting to use markers and popups (as shown here: http://leafletjs.com/examples/quick-start/example-popups.html ) - however the methods I have tried from looking at various examples and tutorials do not seem to be working.现在我并不特别想要任何花哨的东西，我试图使用标记和弹出窗口（如下所示： http : //leafletjs.com/examples/quick-start/example-popups.html ） - 但是我尝试过的方法查看各种示例和教程似乎不起作用。

I'll paste my code below and would greatly appreciate anyone who is able to help.我将在下面粘贴我的代码，非常感谢任何能够提供帮助的人。 Again, I apologise if it is something really simple, all of my limited knowledge is from reading and tweaking examples.再次，如果事情真的很简单，我深表歉意，我所有有限的知识都来自阅读和调整示例。

Most of this is built using this tutorial: http://kempe.net/blog/2014/06/14/leaflet-pan-zoom-image.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>

Answer 1

You code seems correct.你的代码似乎是正确的。 You used the following code to add a marker :您使用以下代码添加标记：

var marker = L.marker([1000, 1000]).addTo(map);

Be aware that this adds a marker to position : latitude : 1000;请注意，这会为 position : latitude : 1000; 添加一个标记。 longitude : 1000;经度：1000；

This is not correct and is not into your map.这是不正确的，并且不在您的地图中。 Add a correct position based on your center to add it .根据您的中心添加一个正确的位置来添加它。

Look at Leaflet sample code and docs for more informations : http://leafletjs.com/examples/quick-start/查看 Leaflet 示例代码和文档以获取更多信息： http : //leafletjs.com/examples/quick-start/

在 Leaflet.js 中添加标记

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-06-12 17:54:47

在 Leaflet.js 中添加标记

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-06-12 17:54:47

解决方案1
1 已采纳 2017-06-12 17:54:47