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アドオンに移動する必要があります（これは「Android用Firefox」アドオンですが、この問題はデスクトップアドオンと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、1 つは Google マップ JS API のローカル バージョンで、もう 1 つはページで実行される特定のアドオン コードです。これにより、サンドボックス化された/スコープの狂気に対処する必要がなくなります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 に答える