初めてのGoogle Maps API

多角形の描画スタイルの設定

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
地図上に描画する多角形のスタイルを設定する方法について解説致します。
講師:
04:07

字幕

このレッスンでは Google Maps API を使って 地図上に描画した多角形の図形の スタイルを変更する方法について解説します まずはダウンロードしてきたこちらの polygon_style というフォルダの中にある― これら3つのファイルを エディターで開いて下さい これがそれらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を進めて行きます 早速レッスンを始めていきましょう まずは javascript.js のファイルを エディターで確認してみます するとこのようになっていますね これまでのレッスンで 東京駅・大阪駅・金沢駅・長野駅 これら4つのポイントを線で結んだ多角形の 描画を地図上に行ってきました 今回はその多角形のスタイル 要するにデザインを 設定する方法について紹介します そのスタイルを設定する部分ですが この javascript.js のファイルの 中で見て行くと 丁度この部分になります ではどのようにスタイルを設定しているか 確認していきたいと思います まずこのスタイルの設定ですが これは前回のレッスンで作成した― こちらの google.maps.Polygon の { } の中に記述していきます 今回は合計5つの設定項目があります 順番に上から見て行きます まずはこちらの strokeColor これはその多角形の外枠の線の色を 指定することができます 次にこちらの strokeOpacity これはその線の透明度を表します 1.0 で完全に不透明 0.0 で完全に透明という形になり その間で指定することができます その次はこちらの strokeWeight これはその線の太さを表しています 次にこちらの fillColor ですが これはその線で囲まれた図形の 中の部分の色を指定することができます 最後にこちらの fillOpacity ですが こちらはその線で囲まれた中の 色の透明度を指定することができます こちらも先程と同様 1.0 で完全に不透明 0.0 で完全に透明という形になります ではこれらの設定をした状態で 一度 index.html をブラウザで開いて どのように見えるか確認してみましょう こちらの index.html をブラウザで開きます するとこのように表示されてきましたね 少し拡大して見てみます このように元々は黒い外枠の線 そしてその線で囲まれた中身も 黒色といったスタイルでしたが 先程のようにスタイルを Google Maps API で指定することによって このように色や線の太さや 透明度といったものを変更する事ができます では エディターに戻ります 以上でレッスンは終了です 今回は Google Maps API を使って 地図上に描画した多角形の図形のスタイルを 変更する方法について解説しました 以降のレッスンでは Google Maps API を使って 地図上に円や矩形―要するに長方形の図形を 描画する方法について解説しますので そちらも合わせてご覧下さい

初めてのGoogle Maps API

このコースではGoogle Maps APIをJavaScriptとjQueryを利用してサイトに実装する方法について学習します。これらについての基本的な説明から、地図の表示方法や設置した地図上にマーカーや情報ウィンドウを設置する方法までを丁寧に解説します。このコースをマスターすれば、さまざまな用途に応じた地図をサイト上に作成できるようになります。

1時間52分 (28 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年05月14日
再生時間:1時間52分 (28 ビデオ)

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。