javascript - example - Uso de ''API de Google Maps'' en un trabajador web

infowindow google maps

Question

Estoy intentando cargar la API de Google Maps en un Javascript Web Worker, pero no puede cargar la biblioteca de mapas. El código del trabajador web se ve como sigue:

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

Esto falla con un simple

Script Error.

en Chrome cuando intento cargar el Worker.

Supongo que algo en la biblioteca de mapas intenta acceder al DOM. Pero eso es sólo una conjetura. ¿Alguien tiene una solución?

EDITAR: Abrí el enlace anterior e intenté extraer + modificar su contenido. Así que el WebWorker.js ahora se ve así:

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

})();

Pero esto todavía resulta en un ''Error de secuencia de comandos''.

Answer 1

De hecho, he podido crear una instancia de un marcador al engañar al trabajador para que piense que hay un objeto DOM para que lo use. Robé la idea de personas que intentan usar comandos jQuery dentro de los trabajadores que tienen el mismo problema. Mi referencia fue desde aquí:

// create a fake document for jQuery to function - DOES NOT PROVIDE ACCESS TO ACTUAL DOM ELEMENTS
// from Tomáš Zato comment on http://.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;};

Answer 2

La API de Google, como el mapa, la unidad, etc., necesita el elemento dom, por lo que no puede utilizar la API del mapa en el trabajador web. También tuve un problema similar en el pasado, después de horas de investigación, confirmé que no se puede hacer, al menos no en este momento. Aquí hay algunas cosas que necesita saber sobre web wroker.

Hay muy pocos objetos a los que podemos tener acceso en los trabajadores web:

XMLHttpRequest, JSON, Worker, navigator, ubicación, establecer y borrar Timeout, importar scripts, establecer y borrar el intervalo.

Los objetos de ventana o padre, localStorage no son accesibles desde un trabajador web.

Para más detalles puedes consultar this enlace.