私はJavaからJavascriptにまったく慣れていないので、私にとって最も難しいことを直接始めなければなりませんでした.Asynchronous Module Definitionパターンを使用してアプリを開発しています...
AMD パターンを使用する JavaScript Web アプリを開発するためのフレームワークを提供するプラットフォームWeejotを使用しています。すべてのドキュメントはこちら。あなたはおそらくそれを知らないでしょうが、AMD のパターンを知っていれば、いずれにせよ助けになるかもしれません...
基本的にMyController.js
、次のようなモジュールがあります (ほとんどのコードは自動的に生成されることに注意してください。コメント行のみを記述しました)。
define([
"js/util",
"framework/Controller"
], function (
util,
Controller
){
function MyController(environment, connector) {
Controller.call(this, environment);
this.settings = environment.siteApplication.getSettings();
this.connector = connector;
//Variable where I have some value stored
this.myVariable = "hello";
}
MyController.prototype = Object.create(Controller.prototype);
util.extend(MyController.prototype, {
//Function to show a map
showMap: function (request, render) {
//Get google maps script
$.getScript("http://maps.googleapis.com/maps/api/js?key=KEY&sensor=false");
//Render is a framework object that basically shows the view "map.html" in full page mode
render({name: "map", mode: "fullPage"});
}
});
return MyController;
});
の行の後、作成されたはず$.getScript(...)
のオブジェクトにアクセスできないため、スクリプトがロードされていないように見えるため、これはうまく機能しません...google.maps
次のように、スクリプトの URL にコールバック関数を追加して機能させました。
$.getScript("http://maps.googleapis.com/maps/api/js?key=KEY&sensor=false&callback=drawMap");
問題は、このコールバック関数がグローバルreturn
関数でなければならないことです。そのため、前のモジュール (上記のステートメントの直前) に次の関数を追加しました。
window.drawMap = function () {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644);,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
そして、どういうわけか、マップを完全にレンダリングします...しかし、私の問題はmyVariable
、関数から変数にアクセスする必要window.drawMap
があることです.それを行う方法はありますか? または、最初からすべて間違っているだけですか?
私が言ったように、私はこれらすべてに慣れていないので、気が狂ってしまい、それを機能させようとして、自分が実際に何をしているのかわからないところまで物事を追加したり変更したりしています..任意の提案をいただければ幸いです...
編集: 役に立つ場合、これは Google マップ スクリプトを取得するときの応答です (Chrome のコンソールからコピー):
window.google = window.google || {};
google.maps = google.maps || {};
(function() {
function getScript(src) {
var s = document.createElement('script');
s.src = src;
document.body.appendChild(s);
}
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@216000000\u0026src=api\u0026hl=es-ES\u0026","http://mt1.googleapis.com/vt?lyrs=m@216000000\u0026src=api\u0026hl=es-ES\u0026"],null,null,null,null,"m@216000000"],[["http://khm0.googleapis.com/kh?v=128\u0026hl=es-ES\u0026","http://khm1.googleapis.com/kh?v=128\u0026hl=es-ES\u0026"],null,null,null,1,"128"],[["http://mt0.googleapis.com/vt?lyrs=h@216000000\u0026src=api\u0026hl=es-ES\u0026","http://mt1.googleapis.com/vt?lyrs=h@216000000\u0026src=api\u0026hl=es-ES\u0026"],null,null,"imgtp=png32\u0026",null,"h@216000000"],[["http://mt0.googleapis.com/vt?lyrs=t@131,r@216000000\u0026src=api\u0026hl=es-ES\u0026","http://mt1.googleapis.com/vt?lyrs=t@131,r@216000000\u0026src=api\u0026hl=es-ES\u0026"],null,null,null,null,"t@131,r@216000000"],null,null,[["http://cbk0.googleapis.com/cbk?","http://cbk1.googleapis.com/cbk?"]],[["http://khm0.googleapis.com/kh?v=75\u0026hl=es-ES\u0026","http://khm1.googleapis.com/kh?v=75\u0026hl=es-ES\u0026"],null,null,null,null,"75"],[["http://mt0.googleapis.com/mapslt?hl=es-ES\u0026","http://mt1.googleapis.com/mapslt?hl=es-ES\u0026"]],[["http://mt0.googleapis.com/mapslt/ft?hl=es-ES\u0026","http://mt1.googleapis.com/mapslt/ft?hl=es-ES\u0026"]],[["http://mt0.googleapis.com/vt?hl=es-ES\u0026","http://mt1.googleapis.com/vt?hl=es-ES\u0026"]],[["http://mt0.googleapis.com/mapslt/loom?hl=es-ES\u0026","http://mt1.googleapis.com/mapslt/loom?hl=es-ES\u0026"]],[["https://mts0.googleapis.com/mapslt?hl=es-ES\u0026","https://mts1.googleapis.com/mapslt?hl=es-ES\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=es-ES\u0026","https://mts1.googleapis.com/mapslt/ft?hl=es-ES\u0026"]]],["es-ES","US",null,0,null,null,"http://maps.gstatic.com/mapfiles/","http://csi.gstatic.com","https://maps.googleapis.com","http://maps.googleapis.com"],["http://maps.gstatic.com/intl/es_es/mapfiles/api-3/12/11","3.12.11"],[2244818506],1.0,null,null,null,null,0,"blabla",null,null,0,"http://khm.googleapis.com/mz?v=128\u0026","AIzaSyAgUZ1LkdjZ9jsRivdSB4cDLmUAOMOMi34","https://earthbuilder.googleapis.com","https://earthbuilder.googleapis.com",null,"http://mt.googleapis.com/vt/icon"], loadScriptTime);
};
var loadScriptTime = (new Date).getTime();
getScript("http://maps.gstatic.com/intl/es_es/mapfiles/api-3/12/11/main.js");
})();