🛎️ ☝🏼 ❕ angular.jsのYandexマップ ⚖️ 🙎🏻 🐾

みなさん、こんにちは。

この投稿は、Yandexマップとjavascriptフレームワークのangle.jsフレンドを連携させる方法について説明しています。もちろん、Googleマップを使用することもできますが、CIS諸国の場合、その品質には多くの要望があります。

少しグーグルで、既製のソリューションを見つけられないので、自分で作成しなければなりませんでした。誰も気にしない、猫へようこそ。

Git デモリポジトリ

この記事を初めて公開した結果、私は貴重な建設的なコメントを受け取りました。これは下のコメントにあります。心の思いとその結果を教えてくれたすべての人に感謝します。

最も単純なものから始めましょう、タスクは地図を表示することです。解決策：

<ya-map ya-zoom="8" ya-center="[37.64,55.76]"></ya-map>

この場合、 ya-center

属性を設定しないと、マップの中心はユーザーの現在位置に設定されます。

ジオを追加します。マップ上のオブジェクトには2つの方法があります。最初の方法-直接の追加、2番目の方法-geoのコレクションへの追加。オブジェクト。コレクションは、geoを結合するために使用されます。同様の方法でさらに操作するために、グループ内のオブジェクト。コレクションには、通常のコレクションとクラスタリングの2つの形式があります。マップには通常のコレクションをいくつでも配置できますが、クラスター化ツールは1つだけで、ポイントのみを取得できます。さて、十分な理論、コードに移りましょう。ジオを追加します。オブジェクトをマップに直接：

 <ya-map ya-zoom="10" ya-center="[37.64,55.76]"> <ya-geo-object ya-source="geoObject"></ya-geo-object> </ya-map>

 $scope.geoObjects= { geometry: { type: 'Circle', coordinates: [37.60,55.76], radius: 10000 }, properties: { balloonContent: "  - 10 ", hintContent: " " } };

ジオを追加します。コレクションのオブジェクト：

 <ya-map ya-zoom="10" ya-center="[37.64,55.76]"> <ya-collection> <ya-geo-object ya-source="geoObject"></ya-geo-object> <ya-collection> </ya-map>

クラスタリングにポイントを追加する：

 <ya-map ya-zoom="10" ya-center="[37.64,55.76]"> <ya-cluster> <ya-geo-object ya-source="geoObject"></ya-geo-object> <ya-cluster> </ya-map>

geoObject

がポイントを指すようになっていることは明らかです。

すべてのマップイベントのサポートを実装しました。イベントをサブスクライブするには、 ya-event[-target]-eventname

ます。ここでya-eventは、これがイベントサブスクリプション、指定されている場合はターゲット、イベントにサブスクライブする要素内のプロパティ、eventnameがサブスクライブするイベントの名前であることを決定するプレフィックスです。 Yandexマップのネイティブイベントオブジェクトは、 $event

パラメーターを介してイベントハンドラーに渡されます。 $event.get('target')

介してイベントを発生させたオブジェクトを取得できます。それでは、マップclick

イベントとgeoObjects

マッププロパティadd

イベントをサブスクライブしましょう。

 <ya-map ya-zoom="10" ya-event-click="click($event)" ya-event-geo-objects-add="added($event)"></ya-map>

 $scope.click = function(e){ //-      }; $scope.added=function(e){ //-       };

マップへのコントロールの追加も同様に簡単です。標準コントロールはyaToolbar

ディレクティブを使用して追加されます。独自のパネルを作成する（または既存のパネルをアップグレードする）場合、 yaControl

ディレクティブはその中に配置されます。例：

 <ya-map ya-zoom="8" ya-center="[37.64,55.76]"> <!--    --> <ya-toolbar ya-name="zoomControl"></ya-toolbar> <!--    --> <ya-toolbar ya-name="toolBar"> <ya-control ya-type="button" ya-params=": balloonHeader" ya-event-select="balloonHeader($event)" ya-event-deselect="balloonHeader($event)"></ya-control> </ya-toolbar> </ya-map>

説明したすべてに加えて、独自のマップを作成したり、カスタムコントロールにテンプレートを使用したり、マップ上の他のオブジェクトなどを使用したりできます。

プロジェクトのgithubや、例のあるサイトで詳細情報を入手できます。

angular.jsのYandexマップ

More articles: