как отображать координаты на карте и рисовать стрелку между ними?

Question

У меня есть список координат действительных позиций следующим образом:

index X    y 
1 24050.0000 123783.3333 
2 24216.6667 123933.3333 
3 24233.3333 123950.0000 
4 24233.3333 124016.6667 
     ................. 

эти широты и долготы, приведены в десятичной форме (а не минуты и секунды). взято с the source

Я хочу создать веб-страницу, на которой отображать карту, на карте показывают эти места по их индексу. Также хочу нарисовать стрелки между ними (1 -> 2), (2 -> 3), ...., вот так.

Как я могу это сделать?

Требуется ли слишком много работы или есть простой способ?

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

Я использую Javascript. Спасибо заранее!

Answer 1

Вы можете сделать это, создав полилинию, а затем присвоив ей значок стрелки.

// Here you create the map 

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 3, 
    center: {lat: 0, lng: -180}, 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
    }); 

//Here are the coordinates of the points you are going to match 

    var flightPlanCoordinates = [ 
    {lat: 37.772, lng: -122.214}, 
    {lat: 21.291, lng: -157.821}, 
    {lat: -18.142, lng: 178.431}, 
    {lat: -27.467, lng: 153.027} 
    ]; 

//Here you create the polyline and assign the arrow icon to it 

    var flightPath = new google.maps.Polyline({ 
    path: flightPlanCoordinates, 
    icons: [{ 
     icon: lineSymbol, 
     offset: '100%' 
    }], 
    geodesic: true, 
    strokeColor: '#FF0000', 
    strokeOpacity: 1.0, 
    strokeWeight: 2 
    }); 

     flightPath.setMap(map); 
    } 

Информация была взята из https://developers.google.com/maps/documentation/javascript/examples/polyline-simple и https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-arrow

Я надеюсь, что это помогает вам