みなさん、こんにちは。
この投稿は、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){
マップへのコントロールの追加も同様に簡単です。 標準コントロールは
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や、 例のあるサイトで詳細情報を入手できます。