Yandex.Map 2.0 APIを使用してユーザーコントロールカードを作成する

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); //    ,     this._map = this.getData().map; }, clear: function() { this._controlListeners.removeAll(); CrossCenterLayout.superclass.clear.call(this); }, onCenterEnter: function() { var center = this._map.getCenter(); var lat = center[0].toFixed(2); var lng = center[1].toFixed(2); //          this._map.hint.show(center, { content: lat + ', ' + lng }); }, onCenterLeave: function() { //   this._map.hint.hide(); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コードを詳細に検討してください。 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({ //      ,         map: map, options: this.options }); //     pane  this.layout.setParentElement(map.panes.get('controls').getElement()); } else { this.layout.setParentElement(null); } }, getParent: function() { return this.parent; } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これはおそらくコードの最も難しい部分です。 ここで、 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メソッドに逆ジオコーディングを追加できます。