Làm cách nào để tham gia tất cả các điểm đánh dấu bằng đường dẫn trong Google Maps?

Question

Tôi mới sử dụng Google Maps (API) và tôi cần để có được những kết quả sau:

Tại thời điểm này, tôi biết làm thế nào để làm cho đánh dấu bản đồ và địa điểm trên đó (dựa trên kinh độ và vĩ độ).

var map; 

map = new google.maps.Map(document.getElementById('map_canvas'), { 
    zoom: 7, 
    center: new google.maps.LatLng(response[0].latitude, response[0].longitude), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

for (var i = 0; i < response.length; ++i) { 

    new google.maps.Marker({ 
     'map' : map, 
     'position' : new google.maps.LatLng(response[i].latitude, response[i].longitude), 
     'title' : response[i].address 
    }); 

} 

Biến response cấu trúc giống như:

[ 
Object 
address: "Krišjāņa Barona iela 25, Riga, LV-1011, Latvia" 
latitude: "24.1245290" 
longitude: "56.9528510" 
__proto__: Object 
, 
Object 
address: "Rīgas iela 1, Tukums, Tukuma novads, LV-3101, Latvia" 
latitude: "23.1630590" 
longitude: "56.9663880" 
__proto__: Object 
] 

Có thể có rất nhiều dấu. Tôi đang tìm cách để tham gia các điểm đánh dấu bằng các đường dẫn như trong hình ảnh xem trước.

Tôi không biết những gì tôi nên tìm kiếm và tôi cần sự giúp đỡ của bạn trong việc này, các bạn. Cảm ơn lời khuyên!

Answer 1

Một ví dụ từ Google's tutorial:

var flightPlanCoordinates = [ 
    new google.maps.LatLng(37.772323, -122.214897), 
    new google.maps.LatLng(21.291982, -157.821856), 
    new google.maps.LatLng(-18.142599, 178.431), 
    new google.maps.LatLng(-27.46758, 153.027892) 
    ]; 
    var flightPath = new google.maps.Polyline({ 
    path: flightPlanCoordinates, 
    strokeColor: "#FF0000", 
    strokeOpacity: 1.0, 
    strokeWeight: 2 
    }); 

Ngoài ra, xem the reference entry for Polylines.

Nếu bạn không biết làm thế nào để lập bản đồ các đối tượng đối phó với một loạt các LatLng đối tượng, đây là một ví dụ:

var flightPath = responseArray.map(function (item) { 
    return new google.maps.LatLng(item.latitude, item.longitude); 
});