1

我已经学会了使用 HTML + JavaScript 的 API V3，就像我在这里所做的那样：http: //jsfiddle.net/hCymP/4/ 

HTML:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

JAVASCRIPT:
var mapContainer =  document.createElement('div');
mapContainer.setAttribute('style',"width: 500px; height: 300px");
document.body.appendChild(mapContainer);

var mapOptions = {
    center: new google.maps.LatLng(-35.000009, -58.197645),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(mapContainer,mapOptions);

但现在我需要将它移动到一个 Firefox 插件（它是一个“Firefox for Android”插件，但我认为这个问题也可以应用于桌面插件和 chrome 插件）。

问题是您需要通过插件中的 javascript 完成所有操作，因此我不能包含以下行：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

所以我尝试用 loadSubScript 解决这个问题，但它返回了一个空的 div：

Components.utils.import("resource://gre/modules/Services.jsm");

Services.scriptloader.loadSubScript("https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false", window, "utf8");

var mapContainer = window.content.document.createElement('div');
    mapContainer.setAttribute('id', "map");
    mapContainer.setAttribute('style',"width: 250px; height: 250px");

var mapOptions = {
    center: new window.google.maps.LatLng(latitude, longitude),
    zoom: 5,
    mapTypeId: window.google.maps.MapTypeId.ROADMAP
}

var map = new window.google.maps.Map(mapContainer,mapOptions);

return mapContainer;

因此，我尝试查看https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false以“复制”该代码并从我的插件中调用它。我下载了 Google Maps Api 文件并将其包含在我的项目中，以便能够检索捕获错误......但也返回了一个空 div：

Components.utils.import("resource://gre/modules/Services.jsm");

// Same as HTML <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

window.google = window.google || {};
window.google.maps = window.google.maps || {};
var modules = window.google.maps.modules = {};
window.google.maps.__gjsload__ = function(name, text) { modules[name] = text;};
window.google.maps.Load = function(apiLoad) {
    delete window.google.maps.Load;
    apiLoad([0.009999999776482582,[[["https://mts0.googleapis.com/vt?lyrs=m@227000000\u0026src=api\u0026hl=en-US\u0026","https://mts1.googleapis.com/vt?lyrs=m@227000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"m@227000000"],[["https://khms0.googleapis.com/kh?v=134\u0026hl=en-US\u0026","https://khms1.googleapis.com/kh?v=134\u0026hl=en-US\u0026"],null,null,null,1,"134"],[["https://mts0.googleapis.com/vt?lyrs=h@227000000\u0026src=api\u0026hl=en-US\u0026","https://mts1.googleapis.com/vt?lyrs=h@227000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"h@227000000"],[["https://mts0.googleapis.com/vt?lyrs=t@131,r@227000000\u0026src=api\u0026hl=en-US\u0026","https://mts1.googleapis.com/vt?lyrs=t@131,r@227000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"t@131,r@227000000"],null,null,[["https://cbks0.googleapis.com/cbk?","https://cbks1.googleapis.com/cbk?"]],[["https://khms0.googleapis.com/kh?v=80\u0026hl=en-US\u0026","https://khms1.googleapis.com/kh?v=80\u0026hl=en-US\u0026"],null,null,null,null,"80"],[["https://mts0.googleapis.com/mapslt?hl=en-US\u0026","https://mts1.googleapis.com/mapslt?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=en-US\u0026","https://mts1.googleapis.com/mapslt/ft?hl=en-US\u0026"]],[["https://mts0.googleapis.com/vt?hl=en-US\u0026","https://mts1.googleapis.com/vt?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt/loom?hl=en-US\u0026","https://mts1.googleapis.com/mapslt/loom?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt?hl=en-US\u0026","https://mts1.googleapis.com/mapslt?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=en-US\u0026","https://mts1.googleapis.com/mapslt/ft?hl=en-US\u0026"]]],["en-US","US",null,0,null,null,"https://maps.gstatic.com/mapfiles/","https://csi.gstatic.com","https://maps.googleapis.com","https://maps.googleapis.com"],["https://maps.gstatic.com/intl/en_us/mapfiles/api-3/13/11","3.13.11"],[2256293068],1.0,null,null,null,null,0,"",null,null,1,"https://khms.googleapis.com/mz?v=134\u0026",null,"https://earthbuilder.googleapis.com","https://earthbuilder.googleapis.com",null,"https://mts.googleapis.com/vt/icon"], loadScriptTime);
};
var loadScriptTime = (new window.Date).getTime();

//I can't use document.write but use loadSubScript insthead
Services.scriptloader.loadSubScript("chrome://googleMaps/content/Google-Maps-V3.js", window, "utf8"); //chrome://MoWA/content/Google-Maps-V3.js", window, "utf8");

var mapContainer = window.content.document.createElement('div');
    mapContainer.setAttribute('id', "map");
    mapContainer.setAttribute('style',"width: 500px; height: 300px");
    mapContainer.style.backgroundColor = "red";

var mapOptions = {
    center: new window.google.maps.LatLng(latitude, longitude),
    zoom: 5,
    mapTypeId: window.google.maps.MapTypeId.ROADMAP
}

var map = new window.google.maps.Map(mapContainer,mapOptions);
return mapContainer;

任何想法？项目源码：https ://www.dropbox.com/sh/zhsyhebsygh74nw/RV4CxPiK8d

4

1 回答 1

3

使用 Addon SDK，您可以使用pagemod来修改页面的内容（看起来像是在页面上注入地图）。在那里，您可以指定contentScriptFiles，其中一个可以是您的本地版本的 google maps JS API，另一个可以是您将在页面上运行的特定插件代码。这将使您不必处理沙盒/范围的疯狂loadSubScript。

let { url: getLocal } = require("sdk/self").data;
let { PageMod } = require("sdk/page-mod");

pageMod.PageMod({
  include: "*.mozilla.org",
  contentScriptFile: [
    getLocal("googlemaps.js"),
    getLocal("my-script.js")
  ]
});
于 2013-08-09T00:29:09.150 回答