Задача была сделать несколько вкладок, в каждой из которых разная карта проезда.
Пример яндекс карты с линиями и точками
21.11.2017
Результат
Пометки
В инструменте Конструктор карт Яндекса, как не странно, нарисовать кривую можно, но получить ее точки нет!
Пришлось воспользоваться обычной картой - кликать на нее и копировать координаты
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&load=package.full&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>