Темы Web Worker для Карт Google - PullRequest
Новая
       6

Темы Web Worker для Карт Google

0 голосов
/ 03 октября 2018

Я пытаюсь использовать веб-рабочие потоки для параллельного захвата направлений между несколькими парами местоположений и сохранения текста в файле в конце.Все прошло хорошо в последовательном подходе.Я использую NMP Live-сервер для отображения страницы.Но браузер просто закрывает страницу сразу после загрузки, и я даже не вижу, что отображается, или обращаюсь к консоли за ошибками.Если я использую 'async defer' для моего тега скрипта с Google Api в index.html, я получу ошибку "UncaughtReferenceError: google is notfined".Заранее спасибо, ребята!

Вот мой index.html: 

<!DOCTYPE html>
<html>
<head>
   <title>Simple Map</title>
   <meta name="viewport" content="initial-scale=1.0">
   <meta charset="utf-8">
   <style>
       #map {
           height: 100%;
           width: 100%;
       }
       html, body {
           height: 100%;
           margin: 0;
           padding: 0;
       }
       panel {
           display: block;
       }
   </style>
   </head>
   <body>
       <panel></panel>
       <div id="map"></div>
       <script src=locations.js></script>
       <script src='main.js'></script>
       <script src='worker.js'></script>
       <script src="https://maps.googleapis.com/maps/api/js?key=<API-KEY>&callback=initMap"></script>
   </body>
</html>

Вот мой main.js: 

let worker = new Worker('worker.js');
worker.onmessage = function(info) {
    output += info.data;
};

const container = document.querySelector('panel');
let output = ""

function initMap() {
    locations.forEach( spot => {
        worker.postMessage(spot);
    });

    download("data.txt", output, 'text/plain');
    console.log("Output: " + output);
}

function download(name, text, type) {
    const file = new Blob([text], {type: type});
    const atag = '<a href="' + URL.createObjectURL(file) + '" download="' + name + '">Download</a>';
    container.insertAdjacentHTML('afterbegin', atag);
}

И, наконец, worker.js: 

let directionsService;
let directionsDisplay;
let map;
self.addEventListener('message', (e) => {
    directionsService = new google.maps.DirectionsService();
    directionsDisplay = new google.maps.DirectionsRenderer();
    const mapOptions = {
        center: {lat: 30, lng: -90},
        zoom: 6
    }
    map = new google.maps.Map(document.getElementById('map'), mapOptions);
    directionsDisplay.setMap(map);
    let request = {
        origin: 'New Orleans, LA',
        destination: e.data,
        travelMode: 'DRIVING',
        provideRouteAlternatives: false,
        drivingOptions: {
            departureTime: new Date('September 7, 2018 15:00:00'),
            trafficModel: 'pessimistic'
        },
        unitSystem: google.maps.UnitSystem.IMPERIAL
    };

    directionsService.route(request, (result, status) => {
        if (status == 'OVER_QUERY_LIMIT') {
            console.log('over');
        }
        if (status == 'INVALID_REQUEST'){
            console.log('other status')
        }
        if (status == 'OK') {
            var data = result["routes"][0].legs[0];
            postmessage(e.data + ", " + data["distance"].text + ", " + data["duration"].text + "\n");
            directionsDisplay.setDirections(result);
            console.log(result);
        }  
   });
   self.close();
});

1 Ответ

0 голосов
/ 03 октября 2018

Веб-работники имеют свои собственные возможности в Javascript.Это означает, что любые сценарии, загруженные вами в область действия веб-страницы, не будут доступны в области действия веб-работника.

Обычно для загрузки сценария используется вызов importScripts .Однако это не будет работать в вашем случае, потому что вы также пытаетесь получить доступ к DOM в веб-работнике.У веб-работника это невозможно по ряду причин (наиболее важным из них является одновременный доступ к структуре данных, которая не сохраняет потоки).

Просмотр вашего кода Не думаю, что вам нужен вебрабочий для расчета маршрутов.Скорее всего, в любом случае фактическая маршрутизация выполняется на одном из серверов Googles.Так как это все равно будет асинхронным, вам не нужно беспокоиться о блокировке пользовательского интерфейса вашей веб-страницы.

...