Добавление маркеров в Leaflet.js

1

Я прошу прощения, если это просто, но я не очень разбираюсь в этом и прочитал и адаптировал несколько примеров, чтобы дойти до того, что я сейчас нахожусь.

Я создаю карту для кампании, в которой я работаю. Я использовал рекламный листок, чтобы сделать это, и после многих попыток я, наконец, все это работаю, используя одно изображение (это то, что я хочу, поскольку оно будет обновляться много).

Следующий шаг - добавить маркеры в интересующие вас места. Теперь я особо не хочу ничего фантастического, я пытался использовать маркеры и всплывающие окна (как показано здесь: 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>

Теги:
leaflet

1 ответ

0
Лучший ответ

Вы код кажется правильным. Вы использовали следующий код для добавления маркера:

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

Имейте в виду, что это добавляет маркер в положение: широта: 1000; долгота: 1000;

Это неверно и не входит в вашу карту. Добавьте правильную позицию, основанную на вашем центре, чтобы добавить ее.

Посмотрите на примерный код и документы для лифтов для получения дополнительной информации: http://leafletjs.com/examples/quick-start/

Поделиться
  • 0
    В примере, который я использовал для создания карты, было сказано, что в качестве координат используются пиксели. Я установил центр, используя эти пиксельные координаты, но маркеры работают на лонглате в зависимости от того, где я расположил центр?
  • 0
    Из документа: leafletjs.com/reference-1.0.3.html#marker MArkers - координаты положения GPS; не пиксели
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню