Как нарисовать линии между точками и посчитать расстояние?

Пост в архиве.

Андрей Тебеньков

10 июня 2015, 13:45

При клике на точках получаю координаты. Нужно соединить точки в той последовательности, в какой на них кликнули. Пробую так, но не работает, конкретно не берутся координаты в Polyline(), полученные при клике на метки. Почему не работает эта конструкция?

myMap.geoObjects.events.add('click', function (e) {
var cordClick = e.get('target').geometry.getCoordinates();
var ParaPoint = '[' + cordClick + ']';
var StartPoint = '[53.657083,91.575066],';
var AllParaPoint = '[' + StartPoint + ParaPoint + ']';

myMap.geoObjects.add(new ymaps.Polyline(AllParaPoint));
});

И как можно посчитать расстояние между этими нажатыми точками?

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

Авторизуйтесь, чтобы оставить комментарий

dimik

27 января 2016, 22:39

[0, 1] - массив из 2х чисел

"[0, 1]" - строка из 5ти символов

Андрей Тебеньков

27 января 2016, 22:39

Ага, это я уже обнаружил. Переделал так..

myMap.geoObjects.events.add('click', function (e) {
var cordClick = e.get('target').geometry.getCoordinates();
var StartPoint = [53.657083, 91.575066];
var AllParaPoint = [StartPoint, cordClick];
myMap.geoObjects.add(new ymaps.Polyline(AllParaPoint));
});

А как при следующем клике, взять последнюю пару координат на которую кликнули и продолжить линию от нее к следующей точке на которую кликнули?

dimik

27 января 2016, 22:39

https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/ILineStringGeometryAccess-docpage/#insert

Андрей Тебеньков

27 января 2016, 22:39

Я вообще запутался..

Массив пар координат я не могу собрать и сделать так?

myMap.geoObjects.add(new ymaps.Polyline(AllParaPoint));

Не понимаю как по другому соединить несколько точек линиями поочередно при клике на точки.

Андрей Тебеньков

27 января 2016, 22:39

Я же не кликаю на карту, только на точки.. Начальная точка и конечная неизменны (это как бы маршрут из лагеря начинается и в лагере заканчивается). Пользователь кликет на точку, с лагеря до этой точки получает отрезок, кликает на следующую получает еще отрезок. И так до тех пор пока не замкнет маршрут в начальной точке (или он автоматом не закроется сам по условию).

dimik

27 января 2016, 22:39

Вы кликаете на метки и добавляете их координаты в геометрию ломаной по нужному индексу.

С чем именно возникает проблема?

Андрей Тебеньков

27 января 2016, 22:39

Попробую. Проблемы никакой, не понимаю как это. Есть какой-нибудь вариант чтобы посмотреть как это работает на практике? И чем этот способ отличается от "Polyline()"? И тут должен быть ивент в ивенте? Я при клике получаю координаты метки и тут же добавляю их геометрию?

dimik

27 января 2016, 22:39

И чем этот способ отличается от "Polyline()"? И тут должен быть ивент в ивенте?

Вы каждый раз хотите создавать новую ломаную и добавлять ее на карту, а старую удалять? Кажется слишком много телодвижений ради добавления в существующую одной точки.

Про ивент в ивенте я не понял

Андрей Тебеньков

27 января 2016, 22:39

Да, линия как раз так и создается каждый раз новая в которой пара координат начальной метки, которую я задаю вручную и вторая точка, полученная при клике на метку. Но каждый раз создается новая, старый отрезок не удаляется.

Про ивент .. Смотрите я слушаю координаты при клике на метку:

myMap.geoObjects.events.add('click', function (e) {....});

В вашем случае нужно кликать на карту:

myMap.events.add('click', function (e) {....});

Вот я и не понял зачем он мне.. или вы имели ввиду само добавление точки на конце линии?

myLineString.insert(myLineString.getLength(), e.get('coords'))

Не могу понять как будет рисоваться ломанная, каждый раз при клике на новую метку проложиться маршрут? Или я должен собрать все точки и только потом нарисовать ломанную?

Не могу избавиться от того, что они у меня рисуется повторно. Потому что она стоит внутри конструкции, которая каждый раз работает при клике.. А в каком другом месте кода рисовать ломанную не пойму..

Андрей Тебеньков

27 января 2016, 22:39

Блин.. дошло, спасибо! Сначала создаю ломанную, а потом уже кликами на метки добавлю точки.

Сейчас попробую посчитать расстояние, если не получится, то создам уже отдельную тему.

dimik

27 января 2016, 22:39

Получить длину ломаной можно так

myPolyline.geometry.getDistance()

Андрей Тебеньков

27 января 2016, 22:39

Сделал так (с форматированием), правильно ведь?