🐠 🏄 🚽 Rambler Maps APIのウィジェット 🌂 🚵🏽 🧘

この記事では、Rambler Maps APIの最も有望な機能の1つであるカスタムウィジェットの接続について説明します。

ウィジェットとは何ですか？厳密に言えば、これらはAPI機能を強化するためにテンプレートによって作成されるJSモジュールです。比Fig的に言えば、APIがマップの操作の基盤である場合、ウィジェットはホームです。そして、それは何になるでしょう-あなたが決める。独自のウィジェットを作成することにより、地図作成の分野で最もワイルドなアイデアを実現できます。

現時点では、「ルーティング」、「ルール」、「交通渋滞」、「カメラ」の 4つのウィジェットをすでに開発しています。それらの例を使用すると、Rambler-Cart APIウィジェットが何であるか、なぜ必要なのか、どのように機能するのかを知ることができます。ちなみに、あなたは私たちにあなた自身のウィジェットを送ることができ、誰でも使えるようにサイトに投稿します！

ビジネスに取り掛かりましょう。次に、単純なタスクを実行する新しいウィジェットの作成をステップごとに分析します。スイッチをオンにした後、カーソルの近くに（カーソル）地理座標でヒントを表示し、地図をクリックしてジオコードを反転し、このヒントでクリックのアドレスを表示し、オフにした後にすべてを非表示にします。

そのため、ウィジェットを作成します。その操作に必要なものはすべて、引数によってRMap.registerWidgetメソッドに渡されます。最初の引数はウィジェットの名前（以降のアクセス用）であり、2番目の引数はパラメーターを持つオブジェクトであり、これについて詳しく説明します。

まず、出力を割り当てる必要があります。作成者、ウィジェットの簡単な説明、バージョン番号を指定します。

RMap.registerWidget('Location', { author: 'Alex.', about: 'location tooltip', version: '0.0.1',

次に-controlsパラメーター、ウィジェットコントロールの配列。私たちの場合、これは1つのスイッチボタン（SwitchButton）です。コントロールオブジェクトのプロパティの中で、 switchOnとswitchOffで構成される重要な機能を強調する価値があります。これらは、ボタンのオンとオフを切り替えるときに機能する機能です。ここで彼らの名前を伝えるのに十分です、後で彼らに戻ります。

  controls: [{ type: ['SwitchButton'], id: 'control', groupId: 'loc', style: { /*  .  Location.js */ }, funcs: { switchOn: 'switchOn', switchOff: 'switchOff' }, params: { autoSwitch: false, autoSwitchCall: false }, parent: 'map.controls.groups.loc' }],

cursorsパラメーターを使用すると、特定の状況で使用するカーソルを指定できます。ウィジェットの場合、正確な位置決めには十字線カーソルが1つあれば十分です。

  cursors: { crosshair: { cur: false, def: "crosshair" } },

次のオプションのパラメーターはeventTypesです。たとえば、他のウィジェットと対話するために使用できるウィジェットイベントタイプです。

  eventTypes: { TURN_ON: "turn on", TURN_OFF: "turn off" },

handlersパラメーターは、イベントとそのハンドラーの関係を設定します。ウィジェットには4つのハンドラーがあります：表示（カーソルがマップ上にあるときにツールチップを表示）、移動（カーソルの後にツールチップを移動）、非表示（カーソルがマップから離れたとき、またはボタンがオフになったときにツールチップを非表示にします）およびジオコード（座標をアドレスに変換します）。ウィジェット内から、次のようにイベントにアクセスできますthis.event.call（ "turn on"、[{data：...}]）; 追加データが同時に送信されます。

  handlers: { show: { type: ["mousemove"], handler: "show", isObject: true, sleeped: true } //   .  Location.js },

toolsパラメーターは、ウィジェットで使用されるAPIライブラリのリストです。ところで、ウィジェットで利用可能なAPIメソッドを使用することができ、使用する必要さえあることを思い出します。

  tools: ["JSON", "Events", "util"],

そして最後に、ウィジェットの変数と機能。

  // topP: 5, leftP: 5, tt: false, h: false, //,    show: function(e) { //  // .  Location.js }, move: function(e) { //  //  .  Location.js }, hide: function() { //  this.tt.style.display = 'none' }, geocode: function(e) { //    // .  Location.js }, //  switchOn  switchOff switchOn: function() { this.handlers.show.activate(); this.handlers.hide.activate(); this.handlers.geocode.activate(); this.cursors.crosshair.show(); }, switchOff: function() { this.handlers.show.sleep(); this.handlers.geocode.sleep(); this.hide(); this.cursors.crosshair.hide(); }, //     turnOn: function() { this.controls.control.switchOn(); }, turnOff: function() { this.controls.control.switchOff(); }

便利な注意点は、map.widgets.Location.turnOn（）のような式を使用して、ページスクリプトで上記のturnOnやturnOffなどのウィジェットのパブリック関数を呼び出すことができることです。

ウィジェットの作成が完了しました。さらに、生成されたコードはページの本文に直接配置できますが、（！）別のJSモジュールに保存し、APIとともに接続する方がはるかに便利です。次に、 getWidgetメソッドを使用してウィジェットを呼び出し、ページ上のスクリプトを数行に減らします。

 <script type="text/javascript"> //     - var map = new RMap('myMap', {widgets: false}); //  map.getWidget("Location", function () {this.init()} ); </script>

完全なサンプルコードは、 http：//maps.rambler.ru/api/examples/TutorialWidget.htmlで入手できます。

Rambler Maps APIのウィジェット

More articles: