@Semenov_Anton

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

Добрый день. Есть проект в 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>
  • Вопрос задан
  • 964 просмотра
Решения вопроса 1
freeExec
@freeExec
Участник OpenStreetMap
Ну это же обычный html код, вот и добавь в маркер ссылку.
.bindPopup("   <br><a href='http://гуляй-душа.рф'>Идите в п...</a>");
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы