初めてのGoogle Maps API

描画する線の座標を設定

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
地図上に線を描画する為の、緯度経度を使った座標の設定方法について解説致します。
講師:
03:31

字幕

このレッスンでは Google Maps API を利用して 地図上へ線を描画するための緯度・経度を 使った座標の設定方法について解説します まずダウンロードしてきたこちらの polyline_setting というフォルダの中にある― これら3つのファイルを エディターで開いて下さい これがそれらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を進めて行きます 早速レッスンを始めていきましょう まずは javascript.js のファイルを エディターで確認してみます すると現状このような形になっています 今回地図上に線を描画するにあたって その描画する座標を緯度・経度を使って 実装していくのですが その実装している箇所がこちらの部分です 因みに Google Maps では 線のことをポリラインと呼びます そのポリラインを描画するにあたって 始点となる緯度・経度 そして 終点となる緯度・経度を指定してあげることで 線を描くことができるわけですね ではこの緯度・経度を使った座標の 指定について見ていきたいと思います まずは 変数を定義します var と書いて 今回はその変数の名前を LinePath としています そして = と書いて こちらの [ ] を書きます そしてその中に始点と終点の 緯度・経度を指定しています 上に書いてる方が始点となって 下に書いてる方が終点となります 今回は始点を東京駅の緯度・経度として 終点を大阪駅の緯度・経度としています 緯度・経度を使った座標の指定には このように new google.maps.LatLng と書いて ( ) そしてその中に緯度と経度を 指定あげればOKです そしてその終点の緯度・経度を使った 座標の指定にも同じように new google.maps.LatLng ( ) と書いて 始点と同様に緯度と経度を その ( ) の中に書いてあげれば大丈夫です このように書くことで この2つの緯度・経度の座標のデータが この配列となってこの変数 LinePath に 格納されていくわけです 因みに この配列の中の始点と終点の 緯度・経度の指定に関しては 2つだけではなくて3つ 4つと複数 書いていくことができます そのように書いた場合は 1番先に書かれたものが始点となって 1番最後に書かれたものが終点となって そのポリラインの中継点といった 形になりますので こちらも覚えておきましょう 以上でレッスンは終了です 今回は Google Maps API を使って 地図上に線を描画するための― 座標の設定方法について解説しました 以降のレッスンでは今回設定した座標に基づき 実際に線を作成して地図上に描画する 方法について解説しますので そちらも合わせてご覧下さい

初めてのGoogle Maps API

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

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

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

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

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