Verwenden der "Google Maps API" in einem Web Worker

Question

Ich versuche, das Google Maps-API in einem JavaScript Web Worker zu laden, aber es lädt die Kartenbibliothek nicht. Der Web-Worker-Code sieht wie folgt aus:

importScripts('http://maps.googleapis.com/maps/api/js?libraries=geometry&key=MYAPIKEY&sensor=FALSE'); 

Dies scheitert mit einem einfachen

Script Error. 

in Chrome, wenn ich versuche, den Arbeiter zu laden.

Ich nehme an, dass etwas in der Kartenbibliothek versucht, auf das DOM zuzugreifen. Aber das ist nur eine Vermutung. Hat jemand eine Lösung?

EDIT: Ich öffnete den Link oben und versuchte zu extrahieren + zu ändern, es ist Inhalt. So sieht die WebWorker.js jetzt so aus:

var window = {google: {}}; 
var google = {maps: {}}; 
(function() { 

    function getScript(src) { 
     importScripts(src); 
    //document.write('<' + 'script src="' + src + '"><' + '/script>'); 
    } 

    var modules = google.maps.modules = {}; 
    google.maps.__gjsload__ = function(name, text) { 
    modules[name] = text; 
    }; 

    google.maps.Load = function(apiLoad) { 
    delete google.maps.Load; 
    apiLoad([0.009999999776482582,[[["http://mt0.googleapis.com/vt?lyrs=m@306000000\u0026src=api\u0026hl=de-DE\u0026","http://mt1.googleapis.com/vt?lyrs=m@306000000\u0026src=api\u0026hl=de-DE\u0026"],null,null,null,null,"m@306000000",["https://mts0.google.com/vt?lyrs=m@306000000\u0026src=api\u0026hl=de-DE\u0026","https://mts1.google.com/vt?lyrs=m@306000000\u0026src=api\u0026hl=de-DE\u0026"]],[["http://khm0.googleapis.com/kh?v=174\u0026hl=de-DE\u0026","http://khm1.googleapis.com/kh?v=174\u0026hl=de-DE\u0026"],null,null,null,1,"174",["https://khms0.google.com/kh?v=174\u0026hl=de-DE\u0026","https://khms1.google.com/kh?v=174\u0026hl=de-DE\u0026"]],[["http://mt0.googleapis.com/vt?lyrs=h@306000000\u0026src=api\u0026hl=de-DE\u0026","http://mt1.googleapis.com/vt?lyrs=h@306000000\u0026src=api\u0026hl=de-DE\u0026"],null,null,null,null,"h@306000000",["https://mts0.google.com/vt?lyrs=h@306000000\u0026src=api\u0026hl=de-DE\u0026","https://mts1.google.com/vt?lyrs=h@306000000\u0026src=api\u0026hl=de-DE\u0026"]],[["http://mt0.googleapis.com/vt?lyrs=t@132,r@306000000\u0026src=api\u0026hl=de-DE\u0026","http://mt1.googleapis.com/vt?lyrs=t@132,r@306000000\u0026src=api\u0026hl=de-DE\u0026"],null,null,null,null,"t@132,r@306000000",["https://mts0.google.com/vt?lyrs=t@132,r@306000000\u0026src=api\u0026hl=de-DE\u0026","https://mts1.google.com/vt?lyrs=t@132,r@306000000\u0026src=api\u0026hl=de-DE\u0026"]],null,null,[["http://cbk0.googleapis.com/cbk?","http://cbk1.googleapis.com/cbk?"]],[["http://khm0.googleapis.com/kh?v=86\u0026hl=de-DE\u0026","http://khm1.googleapis.com/kh?v=86\u0026hl=de-DE\u0026"],null,null,null,null,"86",["https://khms0.google.com/kh?v=86\u0026hl=de-DE\u0026","https://khms1.google.com/kh?v=86\u0026hl=de-DE\u0026"]],[["http://mt0.googleapis.com/mapslt?hl=de-DE\u0026","http://mt1.googleapis.com/mapslt?hl=de-DE\u0026"]],[["http://mt0.googleapis.com/mapslt/ft?hl=de-DE\u0026","http://mt1.googleapis.com/mapslt/ft?hl=de-DE\u0026"]],[["http://mt0.googleapis.com/vt?hl=de-DE\u0026","http://mt1.googleapis.com/vt?hl=de-DE\u0026"]],[["http://mt0.googleapis.com/mapslt/loom?hl=de-DE\u0026","http://mt1.googleapis.com/mapslt/loom?hl=de-DE\u0026"]],[["https://mts0.googleapis.com/mapslt?hl=de-DE\u0026","https://mts1.googleapis.com/mapslt?hl=de-DE\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=de-DE\u0026","https://mts1.googleapis.com/mapslt/ft?hl=de-DE\u0026"]],[["https://mts0.googleapis.com/mapslt/loom?hl=de-DE\u0026","https://mts1.googleapis.com/mapslt/loom?hl=de-DE\u0026"]]],["de-DE","US",null,0,null,null,"http://maps.gstatic.com/mapfiles/","http://csi.gstatic.com","https://maps.googleapis.com","http://maps.googleapis.com",null,"https://maps.google.com","https://gg.google.com","http://maps.gstatic.com/maps-api-v3/api/images/","https://www.google.com/maps",0],["http://maps.gstatic.com/maps-api-v3/api/js/21/3/intl/de_ALL","3.21.3"],[141790386],1,null,null,null,null,null,"",["geometry"],null,0,"http://khm.googleapis.com/mz?v=174\u0026","AIzaSyDQi59vEjsIzBM-AFMeDbszVsOckQOb5A8","https://earthbuilder.googleapis.com","https://earthbuilder.googleapis.com",null,"http://mt.googleapis.com/vt/icon",[["http://mt0.googleapis.com/vt","http://mt1.googleapis.com/vt"],["https://mts0.googleapis.com/vt","https://mts1.googleapis.com/vt"],null,null,null,null,null,null,null,null,null,null,["https://mts0.google.com/vt","https://mts1.google.com/vt"],"/maps/vt",306000000,132],2,500,[null,"http://g0.gstatic.com/landmark/tour","http://g0.gstatic.com/landmark/config",null,"http://www.google.com/maps/preview/log204","","http://static.panoramio.com.storage.googleapis.com/photos/",["http://geo0.ggpht.com/cbk","http://geo1.ggpht.com/cbk","http://geo2.ggpht.com/cbk","http://geo3.ggpht.com/cbk"]],["https://www.google.com/maps/api/js/master?pb=!1m2!1u21!2s3!2sde-DE!3sUS!4s21/3/intl/de_ALL","https://www.google.com/maps/api/js/widget?pb=!1m2!1u21!2s3!2sde-DE"],null,0,0,"/maps/api/js/ApplicationService.GetEntityDetails",0], loadScriptTime); 
    }; 

    importScripts(
    'http://maps.gstatic.com/maps-api-v3/api/js/21/3/intl/de_ALL/main.js' 
    , 'http://maps.gstatic.com/maps-api-v3/api/js/21/3/intl/de_ALL/geometry.js' 
    ); 

})(); 

Aber das führt immer noch zu einem 'Skriptfehler.'.

Answer 1

Google Client API wie Karte, Laufwerk usw. benötigt dom Element, so dass Sie nicht Karte API im Web Worker verwenden können. Ich hatte auch ein ähnliches Problem in der Vergangenheit nach Stunden der Forschung, die ich bestätigt, dass es nicht getan werden kann atleast nicht zu dieser Zeit.Hier sind einige Dinge, die Sie über Web Wroker wissen müssen.

Es gibt sehr wenige Objekte, die wir Zugang in Web-Arbeiter haben:

XMLHttpRequest, JSON, Worker, Navigator, Standort, Setzen und Löschen von Timeout, Import-Scripte, gesetzt und klare Intervall.

Das Fenster oder Parent, localStorage-Objekte sind von einem Web-Worker nicht zugänglich.

für weitere Details können Sie überprüfen this Link.

Answer 2

Ich war tatsächlich in der Lage, eine Instanz eines Markers zu erstellen, indem ich den Worker zu denken dacht, dass es ein DOM-Objekt für die Verwendung gibt. Ich habe die Idee von Leuten gestohlen, die versuchten, jQuery-Befehle in Arbeitern zu verwenden, die auf dasselbe Problem stoßen. Meine Referenz war von hier:

// create a fake document for jQuery to function - DOES NOT PROVIDE ACCESS TO ACTUAL DOM ELEMENTS 
// from Tomáš Zato comment on http://stackoverflow.com/questions/10491448/how-to-access-jquery-in-html-5-web-worker 
var document = self.document = {parentNode: null, nodeType: 9, toString:function() {return "FakeDocument"}}; 
var window = self.window = self; 
var fakeElement = Object.create(document); 
fakeElement.nodeType = 1; 
fakeElement.toString=function() {return "FakeElement"}; 
fakeElement.parentNode = fakeElement.firstChild = fakeElement.lastChild = fakeElement; 
fakeElement.ownerDocument = document; 

document.head = document.body = fakeElement; 
document.ownerDocument = document.documentElement = document; 
document.getElementById = document.createElement = function() {return fakeElement;}; 
document.createDocumentFragment = function() {return this;}; 
document.getElementsByTagName = document.getElementsByClassName = function() {return [fakeElement];}; 
document.getAttribute = document.setAttribute = document.removeChild = 
    document.addEventListener = document.removeEventListener = 
    function() {return null;}; 
document.cloneNode = document.appendChild = function() {return this;}; 
document.appendChild = function(child) {return child;};