Программирование

Рисуем ломаные на Yandex.карта — API 2.1

27.09.2014 /

Всем привет. Сегодня хотел бы поделиться идеями по рисованию нескольких ломаных в Yandex.map v.2.1.

Много писать не буду приведу просто куски кода, так как основная информация изложена на официальном сайте Yandex в разделе API, как эти ломаные рисовать. Так как на оффсайте предложено решение для рисования 1 ломаной, а если у нас несколько маршрутов (в БД) и как их изобразить на 1 карте, это часто создает вопросы.

Ну думаю можно приступить.

1) Устанавливаем карту:

// Установка для карты ее центра и масштаба
var myMap = new ymaps.Map('YMapsID', {
                        // При инициализации карты обязательно нужно указать
                        // её центр и коэффициент масштабирования.
                        center: [55.76, 37.64], // Центр карты - Москва
                        controls: ['zoomControl', 'searchControl', 'typeSelector',  'fullscreenControl'], // контролы для управления карты
                        zoom: 7   // Масштаб карты, приближение
});

2) Устанавливаем опции ломаных:

// Свойства и опции для ломаной линии для API Ya.map 2.1
var properties = {
      hintContent: "Ломаная линия"
};
var options = {
      draggable: true,
      strokeColor: '0404B4ff',// Цвет где код цвета 0404B4, ff - прозрачность
      strokeWidth: 2  // Толщина ломаной в пикселах
};

3) Допустим у нас есть 10 маршрутов, которые надо нарисовать, ну и перебираем все маршруты в цикле:

/*
 var geocoordinats = Array();   
 var geocoordinats = [ [55.80, 37.50], // Массив координат вершин 1 ломаной линии (1 маршрут)
                       [55.80, 37.40],
                       [55.70, 37.50],
                       [55.70, 37.40]
]
*/

.......................
for(var i=0; i<routes.length; i++){   // routes (Массив всех наших маршрутов)
   myPolyline = new ymaps.Polyline(
                   geocoordinats[i], // Массив координат ломаной линий (1 маршрут)
                   properties,
                   options
   );
   
   myMap.geoObjects.add(myPolyline);  // Добавляем геообъект на карту.
}
......................

Ну вот и все, как то так. Если у Вас возникли вопросы, дополнения, поправки — пишите в комментариях.

У меня получилось вот как то так.
Спасибо.

yandex_map_21

Похожие сообщения:

  1. Синхронизация аккаунта в yandex disk linux

Вам также может понравиться

Error debugger of Symfony

07.06.2019

9 комментариев

  • кирилл

    27.01.2015 в 17:39 Ответить

    У меня не рисуются линии. мой код с циклом выглядит так:

    var a=64.5371, b=40.52905,c=5;

var lin1 = Array();

var lin1 = [
	[64.538758,40.532072],
	[a,b],
	[64.538658,40.525571],
	[64.541886,40.5225287],
	[64.544481,40.522282],
	[64.546565,40.523344],
	[64.546298,40.526004],
	[64.546740,40.526305]
];

var properties = {
	hintContent: "Ломаная линия2"
};

var options = {draggable: true, strokeColor: "#ff0000",strokeWidth: 3};

for (var i=0;i< =lin1.length;i++){
	
	polyline1 = new ymaps.Polyline(
						lin1[i], 
						properties, 
						options
	);
	
	myMap.geoObjects.add(polyline1);
}

    помогите найти ошибку

    • Дмитрий

      28.01.2015 в 12:57 Ответить

      А Вы не смотерели вывод ошибок через Firebug, потому что тут я не вижу ошибки.
      Сможете весь Ваш код показать? Я поправлю Вам код, если в нем есть ошибки 🙂

  • кирилл

    29.01.2015 в 14:17 Ответить

    весь код выглядит так:

    
// Как только будет загружен API и готов DOM, выполняем инициализацию
 var myMap;
  ymaps.ready(init);
 
  function init () {
  // Создание экземпляра карты и его привязка к контейнеру с
  // заданным id ("map")
     myMap = new ymaps.Map('map', {
  // При инициализации карты, обязательно нужно указать
  // ее центр и коэффициент масштабирования
     center: [64.5383,40.5308], // Архангельск
     zoom: 14,
     controls: ['smallMapDefaultSet']
  });
    // myMap.setType('yandex#map');//внешний вид карты



    

test = new ymaps.Placemark(                              //балун позволяющий узнать координаты на карте!!!!!!!!!!!
[64.54454582749713,40.53222763555823],{hintContent: "Нажмите, чтобы узнать адрес"},
  {
    balloonPanelMaxMapArea: 0,
    preset: "islands#blueStretchyIcon",
    draggable: true, // метку можно перемещать
    openEmptyBalloon: true
    //preset: 'twirl#whiteStretchyIcon'
  });

     test.events.add('balloonopen', function (e) {
     test.properties.set('balloonContent', "Идет загрузка данных...");//строка не обязательна придает красоту при загрузке данных

     // Имитация задержки при загрузке данных (для демонстрации примера).
     setTimeout(function () {
      ymaps.geocode(test.geometry.getCoordinates(), {
      results: 1
     }).then(function (res) {
      var newContent = res.geoObjects.get(0) ?
      res.geoObjects.get(0).properties.get('name') :
      'Не удалось определить адрес.';

      // Задаем новое содержимое балуна в соответствующее свойство метки.
      test.properties.set('balloonContent', newContent);

            });
        }, 150);//время задержки при выводе адреса
    });

test.events.add('dragend', function(e) {
   // Получение ссылки на объект, который был передвинут. 
   var thisP = e.get('target');
   // Определение координат метки 
   var coords = thisP.geometry.getCoordinates();
   // и вывод их при щелчке на метке
   //thisP.properties.set('balloonContent', coords);//вывод инфы в контент балуна
var input = document.getElementById("vote_output");//две строки вывода значения переменной coords с координатами балуна в input
input.value = coords;
//alert(coords);                                      //работа с координатами и их выводом
});

myMap.geoObjects.add(test);

//_________________________________________________________________________




//________________________________________________________________________


Domer = new ymaps.Placemark([64.5383,40.5308], {                                      //балун метка офиса!!!!!!!!!!
  hintContent: 'Центр карты', 
  balloonContent: 'Офис ООО "Домер"',
//balloonContentHeader: '- содержимое заголовка балуна геообъекта;',
//balloonContentBody: '- содержимое основой части балуна геообъекта;',
//balloonContentFooter: '- содержимое нижней части балуна геообъекта.' 
});//Задаем балун на карту с пометками и подсказками
myMap.geoObjects.add(Domer);//вывод балуна на карту


myhouse = new ymaps.Placemark([64.546768,40.526047], {                                //балун метка домашнего адреса
  hintContent: 'Объект', 
  balloonContent: 'Мой дом' 
});//Задаем балун на карту с пометками и подсказками
myMap.geoObjects.add(myhouse);//вывод балуна на карту

//________________________________________________________рисуем первый маршрут по координатам_________________________________________________________
/* var a=64.5371, b=40.52905,c=5;
var lin1 = Array();
 var lin1 = [[64.538758,40.532072],[64.5371,40.52905],[64.538658,40.525571],[64.541886,40.5225287],[64.544481,40.522282],[64.546565,40.523344],[64.546298,40.526004],[64.546740,40.526305]];
 var properties = {hintContent: "Ломаная линия2"};
 var options = {draggable: true, strokeColor: '#ff0000',strokeWidth: 3};
 for (var i=0;i<=lin1.length;i++){
 polyline1 = new ymaps.Polyline(lin1, properties, options);
myMap.geoObjects.add(polyline1);
} 
 myMap.geoObjects.add(polyline1);*/

//_______________________________________________________конец______________________________________________


 }


function karta1(){         //_________________блок изменения режима карты________________________________
myMap.setType('yandex#map');
}
function karta2(){
 myMap.setType('yandex#publicMap');
 var lin1 = [[64.538758,40.532072],[64.5371,40.52905],[64.538658,40.525571],[64.541886,40.5225287],[64.544481,40.522282],[64.546565,40.523344],[64.546298,40.526004],[64.546740,40.526305]];
 var properties = {hintContent: "Ломаная линия2"};
 var options = {draggable: true, strokeColor: '#ff0000',strokeWidth: 3};
 polyline1 = new ymaps.Polyline(lin1, properties, options);
 myMap.geoObjects.add(polyline1);

}
function karta3(){
myMap.setType('yandex#hybrid')
}
 



function line1(){
var linecord = [[64.54587551738202,40.5521403552838],[64.53856141451104,40.515318989926634],[64.54051942216313,40.51463234441862],[64.56027633135648,40.5251895190996]];
 var properties = {hintContent: "Ломаная линия2"};
 var options = {draggable: true, strokeColor: '#ff0000',strokeWidth: 3};
liniya = new ymaps.Polyline(linecord, properties, options);
myMap.geoObjects.add(liniya);

}

function linefun(){
var a=64.5371, b=40.52905,c=5;
 
var lin11 = Array();
 
var lin11 = [
[64.538758,40.532072],
[a,b],
[64.538658,40.525571],
[64.541886,40.5225287],
[64.544481,40.522282],
[64.546565,40.523344],
[64.546298,40.526004],
[64.546740,40.526305]
];
 
var properties = {
hintContent: "Ломаная линия2"
};
 
var options = {draggable: true, strokeColor: "#ff0000",strokeWidth: 3};
 
for (var i=0;i< =lin11.length;i++){
polyline1 = new ymaps.Polyline(
lin11[i],
properties,
options
);
myMap.geoObjects.add(lin11);
}

}

    Обычная карта с номерами домов
    Народны карта
    Гибрид карта

    путь 1
    путь 2
    путь 3

    • Дмитрий

      30.01.2015 в 12:24 Ответить

      Вы забыли вызвать Ваши линии на карте, код я поправил, линии рисуются.

      // Как только будет загружен API и готов DOM, выполняем инициализацию
var myMap;
ymaps.ready(init);

function init () {
// Создание экземпляра карты и его привязка к контейнеру с
// заданным id (“map”)
    myMap = new ymaps.Map('map', {
// При инициализации карты, обязательно нужно указать
// ее центр и коэффициент масштабирования
        center: [64.5383,40.5308], // Архангельск
            zoom: 13,
            controls: ['smallMapDefaultSet']
    });
// myMap.setType(‘yandex#map’);//внешний вид карты

    test = new ymaps.Placemark( //балун позволяющий узнать координаты на карте!!!!!!!!!!!
        [64.54454582749713,40.53222763555823],{hintContent: "Нажмите, чтобы узнать адрес"},
{
    balloonPanelMaxMapArea: 0,
        preset: "islands#blueStretchyIcon",
    draggable: true, // метку можно перемещать
        openEmptyBalloon: true
//preset: ‘twirl#whiteStretchyIcon’
});

test.events.add('balloonopen', function (e) {
    test.properties.set('balloonContent', "Идет загрузка данных…");//строка не обязательна придает красоту при загрузке данных

// Имитация задержки при загрузке данных (для демонстрации примера).
    setTimeout(function () {
        ymaps.geocode(test.geometry.getCoordinates(), {
            results: 1
        }).then(function (res) {
            var newContent = res.geoObjects.get(0) ?
                res.geoObjects.get(0).properties.get('name') :
            'Не удалось определить адрес.';

// Задаем новое содержимое балуна в соответствующее свойство метки.
            test.properties.set('balloonContent', newContent);

        });
    }, 150);//время задержки при выводе адреса
});

test.events.add('dragend', function(e) {
// Получение ссылки на объект, который был передвинут.
    var thisP = e.get('target');
// Определение координат метки
    var coords = thisP.geometry.getCoordinates();
// и вывод их при щелчке на метке
//thisP.properties.set(‘balloonContent’, coords);//вывод инфы в контент балуна
    var input = document.getElementById("vote_output");//две строки вывода значения переменной coords с координатами балуна в input
    input.value = coords;
//alert(coords); //работа с координатами и их выводом
});

myMap.geoObjects.add(test);

//_________________________________________________________________________

//________________________________________________________________________

Domer = new ymaps.Placemark([64.5383,40.5308], { //балун метка офиса!!!!!!!!!!
    hintContent: 'Центр карты',
balloonContent: "Офис ООО 'Домер'"
//balloonContentHeader: ‘- содержимое заголовка балуна геообъекта;’,
//balloonContentBody: ‘- содержимое основой части балуна геообъекта;’,
//balloonContentFooter: ‘- содержимое нижней части балуна геообъекта.’
});//Задаем балун на карту с пометками и подсказками
myMap.geoObjects.add(Domer);//вывод балуна на карту

myhouse = new ymaps.Placemark([64.546768,40.526047], { //балун метка домашнего адреса
    hintContent: 'Объект',
balloonContent: 'Мой дом'
});//Задаем балун на карту с пометками и подсказками
myMap.geoObjects.add(myhouse);//вывод балуна на карту

//________________________________________________________рисуем первый маршрут по координатам_________________________________________________________
/* var a=64.5371, b=40.52905,c=5;
 var lin1 = Array();
 var lin1 = [[64.538758,40.532072],[64.5371,40.52905],[64.538658,40.525571],[64.541886,40.5225287],[64.544481,40.522282],[64.546565,40.523344],[64.546298,40.526004],[64.546740,40.526305]];
 var properties = {hintContent: “Ломаная линия2″};
 var options = {draggable: true, strokeColor: ‘#ff0000′,strokeWidth: 3};
 for (var i=0;i<=lin1.length;i++){
 polyline1 = new ymaps.Polyline(lin1, properties, options);
 myMap.geoObjects.add(polyline1);
 }
 myMap.geoObjects.add(polyline1);*/

//_______________________________________________________конец______________________________________________
// Вызываем наши линии!
    line1();
    linefun();

}

function karta1(){ //_________________блок изменения режима карты________________________________
    myMap.setType('yandex#map');
}
function karta2(){
    myMap.setType('yandex#publicMap');
    var lin1 = [[64.538758,40.532072],[64.5371,40.52905],[64.538658,40.525571],[64.541886,40.5225287],[64.544481,40.522282],[64.546565,40.523344],[64.546298,40.526004],[64.546740,40.526305]];
    var properties = {hintContent: "Ломаная линия2"};
    var options = {draggable: true, strokeColor: '#ff0000',strokeWidth: 3};
    polyline1 = new ymaps.Polyline(lin1, properties, options);
    myMap.geoObjects.add(polyline1);

}
function karta3(){
    myMap.setType('yandex#hybrid')
}

function line1(){
    var linecord = [[64.54587551738202,40.5521403552838],[64.53856141451104,40.515318989926634],[64.54051942216313,40.51463234441862],[64.56027633135648,40.5251895190996]];
    var properties = {hintContent: "Ломаная линия2"};
var options = {draggable: true, strokeColor: '#ff0000',strokeWidth: 3};
liniya = new ymaps.Polyline(
    linecord,
    properties,
    options
);
myMap.geoObjects.add(liniya);

}

function linefun(){
    var a=64.5371, b=40.52905,c=5;

    var lin11 = [];

    lin11 = [
        [64.538758,40.532072],
        [a,b],
        [64.538658,40.525571],
        [64.541886,40.5225287],
        [64.544481,40.522282],
        [64.546565,40.523344],
        [64.546298,40.526004],
        [64.546740,40.526305]
    ];

    var properties = {
        hintContent: "Ломаная линия2"
    };

    var options = {
        // Задаем опции геообъекта.
        // Отключаем кнопку закрытия балуна.
        balloonCloseButton: false,
        // Цвет линии.
        strokeColor: "#7fff00",
        // Ширина линии.
        strokeWidth: 4,
        // Коэффициент прозрачности.
        strokeOpacity: 0.5
    };

    polyline1 = new ymaps.Polyline(
        lin11,
        properties,
        options
    );
    myMap.geoObjects.add(polyline1);

}

  • кирилл

    30.01.2015 в 13:22 Ответить

    Дмитрий, вы поправили код, но там нет цикла for с помощью которого вы в своем примере рисуете множество линий. Мне именно цикл и был интересен.

    поясню свою проблему. Мне нужно минимальным куском кода рисовать несколько(даже много линий на карте), к примеру, есть тхт файл, каждая строка это отдельный путь, строк много 100…1000 и более. Как мне их нарисовать на карте? я так понимаю нужно считать все в массив и затем из массива рисовать, но не могу понять как это реализовать. Есть мысли?

    • Дмитрий

      30.01.2015 в 14:41 Ответить

      Можете мне прислать структуру вашего файла хотя бы указать 5-10 Ваших маршрутов. Постараюсь Вам код написать! Просто сам решал уже такую же задачу. Подкидываю файл скрипту, а он уже рисует мне все нужные мне маршруты. Не соврать бы, но где то 1000 маршрутов рисовал на ура. Ну вроде скрина который я привел выше в статье.
      Просто дело в том, что я предполагаю что у Вас есть какое то количество машрутов (например в файле).
      Цикл for я использовал для прохождения по всем маршрутам имеющимся у нас. Вы же вызывали цикл из точек только одно маршрута(одной ломаной) и естественно, у Вас ничего не рисовалось 🙂 Вот.

      • кирилл

        02.02.2015 в 19:03 Ответить

        Мы друг друга поняли.Все верно, к примеру, есть файл там несколько маршрутов, которые можно добавлять в файл и они будут появляться на карте. структура была представлена выше. Не имеет значения, какие маршруты будет рисовать ваш скрипт, главное чтобы рисовал. И при добавлении в файл новых координат они тоже рисовались. Было бы очень здорово получить исходник данного скрипта.

        проект будет на базе CMS WordPress маршруты будут добавляться из редактора страниц в файл. расширение файла хоть .тхт . Спасибо, жду ответ.

  • Юлия

    02.11.2018 в 16:25 Ответить

    Добрый день, Дмитрий! Я скопировала Ваш код, но почему то у меня не получилась такая же карта как у Вас. Поможете?

Добавить комментарий

Войти с через: 

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Защита от роБота * Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.