Ramblerカードには、他のカードでは利用できない興味深い設計ソリューションが1つあります。 これは、マップの中心のコントロールです。これにより、マップの現在の中心が何に向けられているかが示されます。 この機能の例に基づいて、自分のサイトでマップの独自のコントロールを作成する方法について説明します。
コントロールの作成は、いくつかの段階に分かれています。
ステップ1.レイアウト。
レイアウト、彼はレイアウトです。 このエンティティは、マップ上の要素の外観を担当します。 私たちの場合、これは十字であり、その上にマウスを移動すると、マップの中心の座標が表示されます。 特別なファクトリー
templateLayoutFactoryを使用してレイアウトを作成します。
var CrossCenterLayout = ymaps.templateLayoutFactory.createClass('<div id="cross-center" style="left:$[options.position.left]px;top:$[options.position.top]px;">+</div>', { build: function() { CrossCenterLayout.superclass.build.call(this); this._controlListeners = this.events.group().add('mouseenter', this.onCenterEnter, this).add('mouseleave', this.onCenterLeave, this);
コードを詳細に検討してください。
templateLayoutFactoryファクトリは、2つのパラメーター、将来のレイアウトテンプレート、および親
クラスのメソッドをオーバーライドできる作成済みレイアウトのメソッドのリストを受け入れます。
この場合、
buildメソッドと
clearメソッドを再定義し、
onCenterEnterメソッドと
onCenterLeaveメソッドも追加します。
buildメソッド
で 、イベント
マネージャーの コンテナーに
mouseleaveと
mouseenterのサブスクリプションを追加します。
clearメソッドでは、これらのサブスクリプションを取り除きます。
ステップ2.制御クラス。
var CrossCenter = function() { this.events = new ymaps.event.Manager(); this.options = new ymaps.option.Manager(); this.state = new ymaps.data.Manager(); }; CrossCenter.prototype = { setParent: function(parent) { this.parent = parent; if (parent) { var map = parent.getMap(); this.layout = new CrossCenterLayout({
これはおそらくコードの最も難しい部分です。 ここで、
IControlインターフェイスを実装します。 まず、適切な
イベントマネージャー、
オプションマネージャー
、および
データマネージャーを使用して必須フィールドを設定し
ます 。 次に、
setParentおよび
getParentメソッドを実装します。 最初の1つは
デバッグモードのおかげでAPIのソースコードにスパイされ、2つ目は質問を引き起こしません。
ステップ3.カードへの追加
テーラードスタイル
#cross-center{ font-size: 20px; cursor: pointer; position: absolute; z-index: 800; }
コンテナカード
<div id="map" style="height: 300px; width: 420px;"></div>
コントロールを作成し、マップの中心に追加します
var crossCenter = new CrossCenter(); map.controls.add(crossCenter, { top: 140, left: 200 });
作業の結果を表示します。PS Ramblerのようにするには、現在のマップのズームに応じて
kindパラメーターを変更することにより、
onCenterEnterメソッドに
逆ジオコーディングを追加できます。