2015-06-14 7 views
17

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:Verwenden der "Google Maps API" in einem Web Worker

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/[email protected]\u0026src=api\u0026hl=de-DE\u0026","http://mt1.googleapis.com/[email protected]\u0026src=api\u0026hl=de-DE\u0026"],null,null,null,null,"[email protected]",["https://mts0.google.com/[email protected]\u0026src=api\u0026hl=de-DE\u0026","https://mts1.google.com/[email protected]\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/[email protected]\u0026src=api\u0026hl=de-DE\u0026","http://mt1.googleapis.com/[email protected]\u0026src=api\u0026hl=de-DE\u0026"],null,null,null,null,"[email protected]",["https://mts0.google.com/[email protected]\u0026src=api\u0026hl=de-DE\u0026","https://mts1.google.com/vt?lyrs=[email protected]\u0026src=api\u0026hl=de-DE\u0026"]],[["http://mt0.googleapis.com/[email protected],[email protected]\u0026src=api\u0026hl=de-DE\u0026","http://mt1.googleapis.com/[email protected],[email protected]\u0026src=api\u0026hl=de-DE\u0026"],null,null,null,null,"[email protected],[email protected]",["https://mts0.google.com/[email protected],[email protected]\u0026src=api\u0026hl=de-DE\u0026","https://mts1.google.com/[email protected],[email protected]\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.'.

+0

Ich bin auch auf diesem stecken, IDK, warum niemand geantwortet hat .. hoffentlich wird sich das ändern? – pascalwhoop

+0

Nur aus Neugier: Warum willst du die Google Map API in einen Webworker laden? – albanx

+0

Ihr 'Script error.' ist, weil Sie versuchen, JS-Dateien von einem anderen Server zu importieren. Eine Möglichkeit, dies zu umgehen, ist, dass Ihr Server eine einfache API wie '/ fetch-script? Src =" http: //maps.gstatic ... "hat und dass der JS-Inhalt zurückgegeben wird. In PHP wäre die Datei nur 'echo file_get_contents (http: //maps.gstatic ...)' –

Antwort

2

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.

1

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