Как добавить ссылку к маркеру в Leaflet?

Mapserver, GeoServer, MapGuide, Google и другое ПО для веб-картографии
Ответить
Fragmatic
Новоприбывший
Сообщения: 3
Зарегистрирован: 30 май 2017, 20:08
Репутация: 0

Как добавить ссылку к маркеру в Leaflet?

Сообщение Fragmatic » 21 июн 2017, 13:29

Добрый день. Есть проект в Leaflet, в нем есть маркеры, подскажите как добавить ссылку на сторонний ресурс в маркер.
Код прилагается

Код: Выделить всё

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Leaflet - свои иконки для маркеров</title>

 <!-- Добавляем файлы стилей CSS для библиотеки -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
 <!--[if lte IE 8]>
     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
 <![endif]-->
 
  <!-- Добавляем ссылку на JS-скрипт библиотеки -->
 <script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>

<style>
 
#map {width: 1280px; height:1024px; }
 
 </style>
 


</head>

<body>
<div id="map"></div>

<script type='text/javascript'>
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', osmAttribution = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
osmLayer = new L.TileLayer(osmUrl, {maxZoom: 18, attribution: osmAttribution});

var map = new L.Map('map');
map.setView(new L.LatLng(56.42712243, 61.91475034), 14)
map.addLayer(osmLayer);

var LeafIcon = L.Icon.extend({
      options: {
        shadowUrl: 'img/shadow.png',
        iconSize:     [32, 37],
        shadowSize:   [51, 37],
        iconAnchor:   [16,37],
        shadowAnchor: [16, 37],
        popupAnchor:  [0, -30]
      }
    });

    var coffeeIcon = new LeafIcon({iconUrl: 'img/coffee-red.png'}),
      cinemaIcon = new LeafIcon({iconUrl: 'img/cinema.png'}),
      restaurantIcon = new LeafIcon({iconUrl: 'img/camera.png'});
      

    
    L.marker([56.43068208,61.9091928], {icon: cinemaIcon}).bindPopup("<strong>Электровоз ВЛ85</strong><br />Грузовой поезд<br /> Номер поезда: <strong>873</strong> <br /> Направление: <strong>Каменск-Уральский - Владивасток</strong> <br /> Путь прибытия: <strong>17</strong> <br /> Скорость: <strong>23 км/ч</strong> <br /> Количество вагонов: <strong>38</strong> <br /> КТСМ: <strong>В норме</strong>").addTo(map);
    L.marker([56.42703492,61.93025082], {icon: cinemaIcon}).bindPopup("<strong>Электровоз 2ЭС6</strong><br />Грузовой поезд <br /> Номер поезда: <strong>1256</strong> <br /> Направление: <strong>Екатеринбург - Оренбург</strong> <br /> Путь: <strong>11</strong> <br /> Скорость: <strong>0 км/ч</strong> <br /> Количество вагонов: <strong>42</strong> <br /> КТСМ: <strong>В норме</strong>").addTo(map);
    L.marker([56.42688215,61.92840815], {icon: cinemaIcon}).bindPopup("<strong>Электровоз ВЛ11</strong><br />Пассажирский поезд <br /> Номер поезда: <strong>658</strong> <br /> Направление: <strong>Екатеринбург - Новый-Уренгой</strong> <br /> Путь: <strong>7</strong> <br /> Скорость: <strong>0 км/ч</strong>  <br /> Количество вагонов: <strong>16</strong> <br /> КТСМ: <strong>В норме</strong>").addTo(map);
    L.marker([56.42431898,61.94143295], {icon: cinemaIcon}).bindPopup("<strong>Локомотив ЧМЗ3</strong><br />Маневровый локомотив <br />Номер поезд: <strong>556</strong> <br /> Путь: <strong>13</strong> <br /> Скорость: <strong>0 км/ч</strong> <br /> КТСМ: <strong>В норме</strong>  ").addTo(map);
    L.marker([56.43218889,61.89302444], {icon: restaurantIcon}).bindPopup("<strong>Железнодорожный переезд ОТП Соцгород</strong> <br /") .addTo(map);
    

     



</script>





</body>
</html>

Аватара пользователя
Denis Rykov
Гуру
Сообщения: 3321
Зарегистрирован: 11 апр 2008, 21:09
Статьи: 33
Проекты: 9
Репутация: 494
Ваше звание: Author
Контактная информация:

Re: Как добавить ссылку к маркеру в Leaflet?

Сообщение Denis Rykov » 21 июн 2017, 13:34

Тег <a>, а в чём собственно проблема?
Spatial is now, more than ever, just another column- The Geometry Column.

Fragmatic
Новоприбывший
Сообщения: 3
Зарегистрирован: 30 май 2017, 20:08
Репутация: 0

Re: Как добавить ссылку к маркеру в Leaflet?

Сообщение Fragmatic » 21 июн 2017, 13:46

Denis Rykov писал(а):Тег <a>, а в чём собственно проблема?
Когда добавляю данный тег в метку - вся карта исчезает

Код: Выделить всё

	L.marker([56.43218889,61.89302444], {icon: restaurantIcon}).bindPopup("<strong>Железнодорожный переезд ОТП Соцгород</strong> <br / <a href="kamera.html">Посмотрите на мою фотографию!</a>") .addTo(map);

freeExec
Гуру
Сообщения: 553
Зарегистрирован: 23 апр 2011, 10:32
Проекты: 1
Репутация: 76
Откуда: Ульяновск

Re: Как добавить ссылку к маркеру в Leaflet?

Сообщение freeExec » 21 июн 2017, 15:25

тег br кривой

Ответить

Вернуться в «Веб-картография»