コース: JavaScript 実践講座：jQueryでGoogle Maps APIを使ってみよう
今すぐ登録して、24,900件以上登録されている、業界エキスパート指導のコースを受講しましょう。
矩形の作成
このレッスンでは Google Maps API を使って 地図上へ矩形いわゆる長方形を描画する為の― その作成方法について解説します まずはダウンロードしてきたこちらの rectangle_make というフォルダの中にある― これら３つのファイルを エディターで開いて下さい これがそれらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を進めて行きます 早速レッスンを始めていきましょう まず javascript.js をエディターで 開いて確認してみます すると現状はこのような形になっています 現在は東京を中心とした ズームレベルが１０の― 地図を HTML 上に生成して 表示させています 今回はこの地図に矩形要するに長方形を 描画する方法について見ていきたいと思います その矩形を作成している部分が この javascript.js の中の― 丁度この部分になります 大きく分けて２つの構成となっています １つ目はこちらの部分 こちらの部分はその矩形要するに長方形の― 左下と右上の角となる 緯度・経度を設定している箇所 そしてもう１つはその左下と右上の― 緯度・経度の座標をベースとして 実際に矩形を作成する所 それがこちらの部分となります ではまず 矩形の左下と右上の緯度・経度の― 設定方法について見て行きます こちらの部分を見ていきましょう まず 変数を作っていますね var と書いて 変数の名前をここでは mapBounds としています そして = と書いて new google.maps.LatLngBounds と書いて ( ) ; と書きます そしてその ( ) の中には こちらの２つの値を入れています 上に書いてあるほうは矩形の左下の 地点となる緯度・経度 ２つ目に書いてあるのが矩形の右上の 角となる地点の緯度・経度 を設定しています まず１行目に関しては こちらは東京タワーの 緯度・経度を設定しています これまでと同じように new google.maps.LatLng( ) と書いて 緯度・経度を順番に書いています そして２つ目も全く同じですね こちらの緯度・経度は東京スカイツリーの 緯度・経度を指定しています このようにすることでこの変数 mapBounds には こちらの矩形の左下と右上の…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。