Пример яндекс карты с линиями и точками

21.11.2017

Задача была сделать несколько вкладок, в каждой из которых разная карта проезда.

Результат

pic1

Пометки

В инструменте Конструктор карт Яндекса, как не странно, нарисовать кривую можно, но получить ее точки нет!

Пришлось воспользоваться обычной картой - кликать на нее и копировать координаты

JS

 
(function($){
$(function() {
	
var map;
			
ymaps.ready(function () {


$(".map-types li").click(function(){
	
	if( $(this).hasClass("active") ) 
		return;
	
	$(".map-types li").removeClass("active");
	$(this).addClass("active");
	
	if( map ) {
		map.destroy();
		map = null;	
	}
	
	
	
	
	if( $(this).data("num")==1 )
	{
		map = new ymaps.Map("map_box", {
			center: [55.887579946399455,37.63921407828383], 
			zoom: 15, 
			type: "yandex#map"
		});
		
		map.controls.add("zoomControl").add("mapTools").add(new ymaps.control.TypeSelector(["yandex#map", "yandex#satellite", "yandex#hybrid", "yandex#publicMap"]));
		
		var line1 = new ymaps.Polyline(
			//[[55.88770342829125,37.66152651100408],[55.887787843499126,37.65545398979435],[55.88792049559612,37.649896452715495],[55.888089324879225,37.64534742622626],[55.889102285089436,37.63562710075627],[55.888987725438454,37.63559491424809],[55.8889875950717,37.63562710075627],[55.88713047555898,37.635004828264826],[55.88694355274277,37.636871645739184],[55.88685913569071,37.636839459231]],
			[[55.88770342829125,37.66152651100408],[55.888052, 37.645304],[55.888980, 37.635606],[55.884926, 37.634220],[55.885167, 37.628373],[55.884739, 37.628298],[55.884745, 37.627762],[55.884949, 37.627778],[55.885115, 37.623996],[55.884660, 37.624039],[55.884630, 37.624843]],
			{},
			{
				strokeWidth: 5,
				strokeColor: "#e6761b"
			}
		);
		map.geoObjects.add(line1);
		
		
		var line2 = new ymaps.Polyline(
			[[55.889074336583754,37.63566013371249],[55.889387866732655,37.632806263320646],[55.88964110076516,37.63023134266634],[55.88955066022977,37.63007041012545],[55.889544630853216,37.630338631026945],[55.889430072519986,37.63132568394442],[55.88882712832669,37.63118620907565],[55.8887608038911,37.631207666747756],[55.88871256786646,37.63136859928865],[55.88867639080846,37.632613144271566],[55.888784921880855,37.632613144271566]],
			{},
			{
				strokeWidth: 5,
				strokeColor: "#e6761b"
			}
		);
		map.geoObjects.add(line2);
		
		var str1 = new ymaps.Placemark(
			[55.888924, 37.632369],
			{
				iconContent: "Центральный офис"
			}, 
			{
				preset: "twirl#orangeStretchyIcon"
			}
		);
		
		map.geoObjects.add(str1);
		
		
		var str2 = new ymaps.Placemark(
			[55.884973, 37.624924],
			{
				iconContent: "Склад"
			}, 
			{
				preset: "twirl#orangeStretchyIcon"
			}
		);
		
		map.geoObjects.add(str2);
		
	}
	else if( $(this).data("num")==2 )
	{
		map = new ymaps.Map("map_box", {
			center: [55.88948527943392,37.63638166556411], 
			zoom: 14, 
			type: "yandex#map"
		});
		
		map.controls.add("zoomControl").add("mapTools").add(new ymaps.control.TypeSelector(["yandex#map", "yandex#satellite", "yandex#hybrid", "yandex#publicMap"]));
		
		/*var marker = new ymaps.Placemark(
			[55.88779990279947,37.63738662987004],
			{},
			{
				iconLayout: "default#image",
				iconImageHref: "/pics/icon.png",
				iconImageSize: [68, 33],
				iconImageOffset: [-34, -15]
			}
		)
		
		map.geoObjects.add(marker);
		*/
		
		var line = new ymaps.Polyline(
			//[[55.89807091520678,37.58777431086503],[55.898004606636675,37.592119489469155],[55.89797446633992,37.59465149477922],[55.89796843827774,37.597548280515284],[55.89792379546946,37.60130332355825],[55.89791173932836,37.604264482310676],[55.89788159895914,37.60509060268728],[55.8978333743195,37.605616315654196],[55.89768654426137,37.60648216503321],[55.89757201006561,37.60699714916408],[55.897451447387446,37.60746921795071],[55.89733691249468,37.60778035419642],[55.89719141499775,37.60809610477132],[55.89588930533462,37.61082122913046],[55.894960922572295,37.61276314845723],[55.89226382691099,37.61835285037819],[55.891395647960934,37.62018748134439],[55.89079876361756,37.621850450933614],[55.89038274786528,37.62307353824442],[55.89021995787347,37.62360998004739],[55.89009937225224,37.62413569301431],[55.88997878625471,37.624929626882725],[55.889840111892354,37.625981052816556],[55.88979187721489,37.62644239276711],[55.8897134957356,37.62750454753702],[55.889556732300065,37.6300794681913],[55.88944820339524,37.63120599597755],[55.8889875950717,37.63562710075627],[55.88713047555898,37.635004828264826],[55.88694355274277,37.636871645739184],[55.88685913569071,37.636839459231]],
			[[55.89807091520678,37.58777431086503],[55.898004606636675,37.592119489469155],[55.89797446633992,37.59465149477922],[55.89796843827774,37.597548280515284],[55.89792379546946,37.60130332355825],[55.89791173932836,37.604264482310676],[55.89788159895914,37.60509060268728],[55.8978333743195,37.605616315654196],[55.89768654426137,37.60648216503321],[55.89757201006561,37.60699714916408],[55.897451447387446,37.60746921795071],[55.89733691249468,37.60778035419642],[55.89719141499775,37.60809610477132],[55.89588930533462,37.61082122913046],[55.894960922572295,37.61276314845723],[55.89226382691099,37.61835285037819],[55.891395647960934,37.62018748134439],[55.89079876361756,37.621850450933614],[55.89038274786528,37.62307353824442],[55.89021995787347,37.62360998004739],[55.89009937225224,37.62413569301431],[55.88997878625471,37.624929626882725],[55.889840111892354,37.625981052816556],[55.88979187721489,37.62644239276711],[55.8897134957356,37.62750454753702],[55.889556732300065,37.6300794681913],[55.88944820339524,37.63120599597755],[55.8889875950717,37.63562710075627],[55.884926, 37.634220],[55.885167, 37.628373],[55.884739, 37.628298],[55.884745, 37.627762],[55.884949, 37.627778],[55.885115, 37.623996],[55.884660, 37.624039],[55.884630, 37.624843]],
			{},
			{
				strokeWidth: 5,
				strokeColor: "#e6761b"
			}
		);
		map.geoObjects.add(line);
		
		var line2 = new ymaps.Polyline(
			[[55.889430072519986,37.63132568394442],[55.88882712832669,37.63118620907565],[55.8887608038911,37.631207666747756],[55.88871256786646,37.63136859928865],[55.88867639080846,37.632613144271566],[55.888784921880855,37.632613144271566]],
			{},
			{
				strokeWidth: 5,
				strokeColor: "#e6761b"
			}
		);
		map.geoObjects.add(line2);
		
		var str1 = new ymaps.Placemark(
			[55.888924, 37.632369],
			{
				iconContent: "Центральный офис"
			}, 
			{
				preset: "twirl#orangeStretchyIcon"
			}
		);
		
		map.geoObjects.add(str1);
		
		
		var str2 = new ymaps.Placemark(
			[55.884973, 37.624924],
			{
				iconContent: "Склад"
			}, 
			{
				preset: "twirl#orangeStretchyIcon"
			}
		);
		
		map.geoObjects.add(str2);
		
	}
	else if( $(this).data("num")==3 )
	{
		map = new ymaps.Map("map_box", {
			//center: [55.88765991639578,37.63782868852552], 
			center: [55.884973, 37.624924],
			zoom: 17, 
			type: "yandex#map"
		});
		
		map.controls.add("zoomControl").add("mapTools").add(new ymaps.control.TypeSelector(["yandex#map", "yandex#satellite", "yandex#hybrid", "yandex#publicMap"]));
		
		/*var marker = new ymaps.Placemark(
			[55.88779990279947,37.63738662987004],
			{},
			{
				iconLayout: "default#image",
				iconImageHref: "/pics/icon.png",
				iconImageSize: [68, 33],
				iconImageOffset: [-34, -33]
			}
		)
		
		map.geoObjects.add(marker);
		*/
		
		var line2 = new ymaps.Polyline(
			[[55.8889875950717,37.63562710075627],[55.88713047555898,37.635004828264826],[55.88694355274277,37.636871645739184],[55.88685913569071,37.636839459231]],
			{},
			{
				strokeWidth: 5,
				strokeColor: "#e6761b"
			}
		);
		map.geoObjects.add(line2);
		
		var str1 = new ymaps.Placemark(
			[55.888924, 37.632369],
			{
				iconContent: "Центральный офис"
			}, 
			{
				preset: "twirl#orangeStretchyIcon"
			}
		);
		
		map.geoObjects.add(str1);
		
		
		var str2 = new ymaps.Placemark(
			//[55.88683384262932,37.63631592264114],
			[55.884973, 37.624924],
			{
				iconContent: "Склад"
			}, 
			{
				preset: "twirl#orangeStretchyIcon"
			}
		);
		
		map.geoObjects.add(str2);
	}
});


$(".map-types li").eq(0).click();

});

});
})(jQuery);


CSS

 
.map-types {
    width: 800px;
    margin: 0px auto;
    padding: 0px;
    height: 50px;
    list-style: none;
    margin-top: 50px;
}

.map-types li {
    height: 50px;
    line-height: 50px;
    float: left;
    padding: 0px 25px;
    background: #e7b435;
    color: #000;
    text-decoration: underline;
    cursor: pointer;
    margin: 0px 5px 0px 0px;
}


.map-types li.active {
    background: #eaeaea;
    text-decoration: none;
    cursor: default;
}

#map_box{
	height: 450px;
}

HTML

 
<section id="so_bottom_maps" class="socomponent">
	<link rel="stylesheet" type="text/css" href="/style.css" media="all" />
	<script type="text/javascript" src="https://api-maps.yandex.ru/2.0/?coordorder=latlong&amp;load=package.full&amp;lang=ru-RU"></script>
	<script src="/map.js"></script>

	<ul class="map-types">
		<li data-num="1">Проезд от м. Медведково</li>
		<li data-num="2">Проезд от м. Алтуфьево</li>
		<li data-num="3">Проезд на территории склада</li>
	</ul>

	<div id="map_box"></div>
 
</section>


Пометки: yandex maps, карта, карты
Яндекс.Метрика