初めてのGoogle Maps API

線の描画スタイルの設定

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

ぜひご覧ください。

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

字幕

このレッスンでは Google Maps API を使って 地図上に描画した線のスタイルを 変更する方法について解説いたします まずはダウンロードしてきた こちらの polyline_style という フォルダの中に入っている これら3つの ファイルをエディターで開いてください そしてこれがそれらのファイルを 開いた状態です これらのファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう それではまず javaScript.js のファイルを エディターで確認します 前回までのレッスンで地図上に 東京駅から大阪駅までのポリライン いわゆる線を作成するところまで やってきました 今回のレッスンではこの線のデザインを 変える方法についてご説明します その線のデザインを変える部分ですが コード上で見ますと こちらの部分となります それではどのように設定しているか 見ていきたいと思います まずこの設定項目自体は ラインを作成した こちらの google.maps.polyline の この波括弧の間に書いていることに 注目してください この波括弧の間には前回のレッスンで設定した こちらのパスキーも存在していますね このパスキーと同じ波括弧の間に 書いていきます 今回は線のスタイルに関して 3つの設定項目があります まず1つ目 こちらの strokeColor ですが これは線の色を指定することができます そして2つ目 こちらの strokeOpacity に関しては 線の透明度を指定してあげることができます 1.0 が完全に不透明で 0.0 が完全に透明という形になります その間で値を設定することができます そして3つ目 最後のこちらは strokeWeight こちらは線の太さを設定することができます それではこれら3つの設定を追加した状態で 一度ブラウザでどのように見えるか 確認して見たいと思います それではこの 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日

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

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

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