Как добавить направление в путь отслеживания для карт Google

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

Проблема в том, что я хочу показать направление движения по ссылкам;

поэтому я не понимаю, как показать направление на линии между точками маркера.

Есть ли способ выполнить эту задачу.

8
nl ja de

1 ответы

Отображение направления на полилинии может выполняться стрелками.

Существуют определенные предопределенные пути, которые предоставляет Google Maps api3.

См. Этот раздел документации - СИМВОЛЫ ПО ПОЛИЛИНЕ , которые можно использовать, кроме стрелки.

Посмотрите на эту скрипку, которая использует стрелку для указания направления на полилинии.

DEMO с символом sigle

Вы также можете установить свойство repeat для символа, чтобы оно повторялось на регулярной основе.

DEMO с повторяющимися символами

<Сильный> JavaScript -

var iconsetngs = {
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
var polylineoptns = {
    path: markers,
    strokeOpacity: 0.8,
    strokeWeight: 3,
    map: map,
    icons: [{
        icon: iconsetngs,
        offset: '100%'}]
};
polyline = new google.maps.Polyline(polylineoptns);

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

UPDATE: Not sure about the point you are trying to tell in the comments. The markers can be displayed the same way. Here is the code that adds markers with a loop and also set the polyline with arrows:

ДЕМО С МАРКЕРАМИ И ПОЛИЛАНОМ

Javascript:

var polylineoptns = {
        strokeOpacity: 0.8,
        strokeWeight: 3,
        map: map,
        icons: [{
            repeat: '70px', //CHANGE THIS VALUE TO CHANGE THE DISTANCE BETWEEN ARROWS
            icon: iconsetngs,
            offset: '100%'}]
    };
    polyline = new google.maps.Polyline(polylineoptns);
    var z = 0;
    var path = [];
    path[z] = polyline.getPath();
    for (var i = 0; i < markers.length; i++) //LOOP TO DISPLAY THE MARKERS
    {
        var pos = markers[i];
        var marker = new google.maps.Marker({
            position: pos,
            map: map
        });
        path[z].push(marker.getPosition()); //PUSH THE NEWLY CREATED MARKER'S POSITION TO THE PATH ARRAY
    }
25
добавлено
Большое спасибо за распространение этого ответа @Cdeez! Очень полезно!
добавлено автор jerrygarciuh, источник
Я хочу получить более конкретный ответ ....
добавлено автор Mohammad Sadiq Shaikh, источник
Используя значок как стрелку, я не могу показать другие значки маркеров.
добавлено автор Mohammad Sadiq Shaikh, источник
Я хочу, чтобы маркерные значки были как воздушные шары со стрелкой между ????
добавлено автор Mohammad Sadiq Shaikh, источник
Хорошо ... Это может быть реализовано ...
добавлено автор Mohammad Sadiq Shaikh, источник
Как я могу получить общее расстояние, пройденное до последней точки. Не рассчитано по начальной и конечной точке, а по пути путешествия ????
добавлено автор Mohammad Sadiq Shaikh, источник
См. Обновление. Надеюсь, что это необходимо.
добавлено автор Cdeez, источник
Это другой вопрос. Подумайте о том, чтобы опубликовать его как новый вопрос.
добавлено автор Cdeez, источник