Рисование нескольких полилиний в Google Maps JavaScript API - PullRequest
Новая
       18

Рисование нескольких полилиний в Google Maps JavaScript API

0 голосов
/ 14 мая 2018

Я отправляю этот вопрос, потому что большинство вопросов, которые я нашел, на самом деле не отвечали на мой вопрос, и я наконец понял это.Надеюсь, это будет полезно кому-то еще для более быстрого прояснения ситуации.

-EDIT- Я редактировал вопрос в надежде, что он будет более полезным для всех, кто сталкивается с этим.

- Вопрос - У меня проблемы с загрузкой нескольких полилиний в карты Google.Я попытался передать массив в новую функцию google.maps.Polyline следующим образом: 

var flightPlanCoordinates = [
        { lat: 41.7171899900261, lng: -85.002969973285587 },
        { lat: 41.716339720601695, lng: -85.00356011920411 },
    ];

    var flightPlanCoordinates2 = [
        { lat: 44, lng: -89 },
        { lat: 49, lng: -89 },
    ];

var arrayOfFlightPlans = [flightPlanCoordinates, flightPlanCoordinates2];

var flightPath = new google.maps.Polyline({
    path: arrayOfFlightPlans,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 4,
    });
flightPath.setMap(map);

Это не сработало и вызвало ошибку "InvalidValueError: по индексу 0: не LatLng или LatLngLiteral:в свойстве lat: не число "

Моя следующая попытка была связана с попыткой цикла for следующим образом (обратите внимание, что массивы lat lng не изменились по сравнению с фрагментом кода выше); 

for (let i = 0; i < 2; i++) {
        var flightPath = new google.maps.Polyline({
        path: arrayOfFlightPlans,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 4,
        id: segID
        });
}
flightPath.setMap(map);

Этоработал, но не дал результатов, на которые я надеялся.Последний вывод lng был последним набором координат в моем массиве.Что я делаю неправильно?Разве цикл не должен устанавливать новую ломаную линию на каждой итерации цикла for?

1 Ответ

0 голосов
/ 14 мая 2018 
var map;
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 41.713, lng: -85.003},
        zoom: 16
    });

    var flightPlanCoordinates = [
        { lat: 41.7171899900261, lng: -85.002969973285587 },
        { lat: 41.716339720601695, lng: -85.00356011920411 },
        { lat: 41.715420123340095, lng: -85.003969783778473 },
        { lat: 41.713850219112373, lng: -85.0043800221203 },
        { lat: 41.709869880890324, lng: -85.004809740676933 },
        { lat: 41.709570224086633, lng: -85.004860160268152 },

    ];

    var flightPlanCoordinates2 = [
        { lat: 42, lng: -86 },
        { lat: 42, lng: -87},
        { lat: 42, lng: -88 },
        { lat: 43, lng: -88 },
        { lat: 44, lng: -89 },
        { lat: 49, lng: -89 },

    ];

    var arrayOfFlightPlans = [flightPlanCoordinates, flightPlanCoordinates2];

    //Loops through all polyline paths and draws each on the map.
    for (let i = 0; i < 2; i++) {
        var flightPath = new google.maps.Polyline({
        path: arrayOfFlightPlans[i],
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 4,
        });

        flightPath.setMap(map);
    }
}

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

flightPath.setMap(map);

-EDIT- Чтобы дать дальнейшие объяснения, я думал, что на каждой итерации цикла for создается новый объект google.maps.Polyline, и я был прав, но это не значит, что на карте рисуется новая ломаная линия. Полилиния добавляется на карту только тогда, когда вы запускаете команду setMap (map), как показано в коде выше. Это означает, что если мы хотим новую полилинию от каждого элемента в массиве, нам нужно добавлять каждую полилинию на карту на каждой итерации цикла.

...