Cách thêm hướng trên đường dẫn theo dõi cho bản đồ google

Question

Tôi đang hiển thị theo dõi trên bản đồ với các điểm đánh dấu và đường kết nối chúng.

Vấn đề là tôi muốn hiển thị hướng đi trên các liên kết;

vì vậy tôi không nhận được cách hiển thị hướng trên đường giữa các điểm đánh dấu.

Có cách nào để thực hiện tác vụ này không.

Answer 1

Hiển thị hướng trên đường polyline có thể được thực hiện bằng mũi tên.

Có một số đường dẫn được xác định trước mà bản đồ google api3 cung cấp.

Xem phần tài liệu này - SYMBOLS ON POLYLINE, có thể được sử dụng ngoài mũi tên.

Hãy xem fiddle này sử dụng mũi tên để chỉ hướng trên polyline.

DEMO with a sigle symbol

Bạn cũng có thể thiết lập các repeat tài sản cho các biểu tượng để nó lặp đi lặp lại cho đều đặn.

DEMO with repeating symbols

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); 

Các tính năng thú vị của biểu tượng được xác định trước đây (vào mũi tên phía trước đặc biệt) là những điểm mũi tên theo hướng chính xác trong đó bạn tọa độ được đặt. Vì vậy, điều đó rõ ràng là phục vụ mục đích biểu thị hướng trong Hệ thống Theo dõi.

CẬP NHẬT: Không chắc chắn về điểm bạn đang cố gắng nói trong nhận xét. Các điểm đánh dấu có thể được hiển thị theo cùng một cách. Đây là mã có thêm dấu với một vòng lặp và cũng thiết lập các polyline có mũi tên:

DEMO WITH MARKERS AND POLYLINE

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 
    }