Как объединить все маркеры с путями в Google Maps? - PullRequest
Новая
       23

Как объединить все маркеры с путями в Google Maps?

8 голосов
/ 25 октября 2011

Я новичок в Google Maps (API) и мне нужно получить следующий результат:

paths

На данный момент я знаю, как отобразить карту и разместитьмаркеры на нем (основанные на долготе и широте). 

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

}

Переменная response структура имеет вид: 

[
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
]

Может быть много маркеров.Я ищу способ объединить маркеры с путями, как на изображении предварительного просмотра.

Я не знаю, что мне нужно искать, и мне нужна ваша помощь в этом, ребята.Спасибо за совет!

1 Ответ

12 голосов
/ 25 октября 2011

Пример из Учебник Google : 

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

Также см. справочную запись для Polylines.

Если вы неНе знаете, как сопоставить объект ответа с массивом объектов LatLng, вот пример: 

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