Javascript 使用';谷歌地图API';在网络工作者中

Javascript 使用';谷歌地图API';在网络工作者中,javascript,html,google-maps,web-worker,Javascript,Html,Google Maps,Web Worker,我试图在Javascript Web Worker中加载GoogleMapsAPI,但它无法加载地图库。Web Worker代码如下所示: importScripts('http://maps.googleapis.com/maps/api/js?libraries=geometry&key=MYAPIKEY&sensor=FALSE'); 这在一个简单的例子中失败了 Script Error. 在Chrome中,当我尝试加载工人时 我假设maps库中有东西试图访问DOM。

我试图在Javascript Web Worker中加载GoogleMapsAPI,但它无法加载地图库。Web Worker代码如下所示:

importScripts('http://maps.googleapis.com/maps/api/js?libraries=geometry&key=MYAPIKEY&sensor=FALSE'); 
这在一个简单的例子中失败了

Script Error.
在Chrome中,当我尝试加载工人时

我假设maps库中有东西试图访问DOM。但这只是一个猜测。有人有解决办法吗

编辑: 我打开了上面的链接,试图提取并修改它的内容。因此WebWorker.js现在看起来像这样:

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

})();
var-window={google:{};
var google={maps:{}};
(功能(){
函数getScript(src){
进口许可证(src);
//文件。写(“”);
}
var modules=google.maps.modules={};
google.maps.\uuugjsload\uuuuu=函数(名称、文本){
模块[名称]=文本;
};
google.maps.Load=函数(apiLoad){
删除google.maps.Load;
apiLoad([0.009999776482582,[[[]http://mt0.googleapis.com/vt?lyrs=m@306000000\u0026src=api\u0026hl=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\u0026“],[]http://khm0.googleapis.com/kh?v=174\u0026hl=de de\u0026“http://khm1.googleapis.com/kh?v=174\u0026hl=de de\u0026“],空,空,空,1,“174”,[“https://khms0.google.com/kh?v=174\u0026hl=de de\u0026“https://khms1.google.com/kh?v=174\u0026hl=de\u0026“]],[[”http://mt0.googleapis.com/vt?lyrs=h@306000000\u0026src=api\u0026hl=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\u0026“https://mts1.google.com/vt?lyrs=h@306000000\u0026src=api\u0026hl=de\u0026“],[]http://mt0.googleapis.com/vt?lyrs=t@132,r@306000000\u0026src=api\u0026hl=de\u0026“http://mt1.googleapis.com/vt?lyrs=t@132,r@306000000\u0026src=api\u0026hl=de\u0026“],null,null,null,null,“t@132,r@306000000",["https://mts0.google.com/vt?lyrs=t@132,r@306000000\u0026src=api\u0026hl=de\u0026“https://mts1.google.com/vt?lyrs=t@132,r@306000000\u0026src=api\u0026hl=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“],空,空,空,空,“86”,[”https://khms0.google.com/kh?v=86\u0026hl=de de\u0026“https://khms1.google.com/kh?v=86\u0026hl=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”,“美国”,零,0,零,零http://maps.gstatic.com/mapfiles/","http://csi.gstatic.com","https://maps.googleapis.com","http://maps.googleapis.com,空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,”,[“几何体”],null,0http://khm.googleapis.com/mz?v=174\u0026,“AIzaSyDQi59vEjsIzBM-AFMEDBSvsockQOB5A8”https://earthbuilder.googleapis.com","https://earthbuilder.googleapis.com,空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,null,null,[”https://mts0.google.com/vt","https://mts1.google.com/vt“],“/maps/vt”,306000000132],2500,[null,”http://g0.gstatic.com/landmark/tour","http://g0.gstatic.com/landmark/config,空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 DE“],null,0,0,”/maps/api/js/ApplicationService.GetEntityDetails”,0],loadScriptTime);
};
进口文件(
'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'
);
})();

但这仍然会导致“脚本错误”。

谷歌客户端api(如map、drive等)需要dom元素,因此您无法在web worker中使用map api。我在过去几个小时的研究中也遇到过类似问题,我确认至少目前无法完成。以下是有关web Wriker的几点您需要了解的内容

我们可以在web workers中访问的对象很少:

XMLHttpRequest、JSON、Worker、navigator、位置、设置和清除超时、导入脚本、设置和清除间隔

无法从Web worker访问窗口或父本地存储对象


有关更多详细信息,您可以查看链接。

我实际上已经能够创建一个标记实例,方法是愚弄工作人员,使其认为有一个DOM对象可供其使用。我从尝试在遇到相同问题的工作人员中使用jQuery命令的人那里学到了这个想法。我的参考资料如下:

// 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;};
我被困在这上面了