アーカイブ

ブートストラップ３のaffixとScrollSpyを使ったサンプルレイアウト

ブートストラップ３のサンプルoffcanvasを流用してaffixとScrollSpyを使ったサンプルレイアウトを作成しました。これによって、ページ内をスクロールするとその位置に応じてサイドバーのリンクがアクティブになります。
　
以下、Bootstrap v3.3.7を使って確認しています。
続きを読む →

関連記事の目次

Angular2でHTTP POST送信

Angular2のHTTPクライアントのpostメソッドでサーバーへ送信する方法、HTTPヘッダーの設定方法と送信データの変換方法をまとめました。
※Angular2の2.0.0版、TypeScriptを使って確認したものです。（デモはv4.4.3、v2.0.0で動作確認）
続きを読む →

関連記事の目次

Angular2でHTTPでサーバーからJSONデータ取得

Angular2のHTTPクライアントを使って、サーバーからGetリクエストでJSONファイルのデータを取得するサンプルを作成しました。
※Angular2の2.0.0版、TypeScriptを使って確認したものです。（デモはv4.4.3、v2.0.0で動作確認）
続きを読む →

関連記事の目次

AngularJSを使ってGoogleマップ（５）重複して表示されるマーカーをクラスター化する方法

複数のマーカーが近くにあって重複して表示されるような場合、クラスター化してまとめて表示する事が出来ます。クラスター化したアイコンをクリックするとズームアップしてそれぞれのマーカーを表示させる事が出来ます。
　
デモとコードサンプルはこちら。
　

サンプルコードの説明


　
１）ui-gmap-markersタグにクラスター関連の属性追加（HTML）
　

<ui-gmap-markers models="map.Markers" coords="'self'"
                 doCluster="map.ClusterMarkers"
                 clusterOptions="map.clusterOptions">
</ui-gmap-markers>

・doClusterオプション
クラスター化するかしないかを設定
　
・clusterOptions
どのようにクラスター化するかのオプション設定
　
２）クラスターのオプションを設定（スクリプト）
　

clusterOptions: {
    title: 'Cluster Markers', 
    gridSize: 60, 
    ignoreHidden: true, 
    minimumClusterSize: 2
}

・title
クラスター化したアイコンをマウスオーバーした際に表示される
　
・gridSize
どの範囲内にあるマーカーをクラスター化するかのサイズ
　
・minimumClusterSize
何個のマーカーがgridSize内にあるとクラスター化するか
　

動作確認


　
①初期表示
　
ズームレベル16で東京駅近傍に４つのマーカーを表示されます。この段階ではクラスター化されていません。
　
②一段階ズームアウトして、広い範囲を表示。
　
・３つのマーカーがクラスター化され、青いアイコンで表示されます。
　
・青いアイコン内の数字がクラスター化されたアイコンの数を表します。
　
・青いアイコンをクリックすると拡大表示されて個別のマーカーが確認できるようになります。
　
③さらにもう一段階ズームアウトして、広い範囲表示
　
４つのマーカーがクラスター化されて表示されます。

関連記事の目次

Proudly powered by WordPress