地図の描画とLatLngクラス

広告

Mapクラスのオブジェクトを作成しただけでは地図は表示されません。地図を作成するにはMapクラスで定義されているdrawMapメソッドを使います。 

drawMap(center:LatLng, zoom?:Number, layerSetId?:String)

地図を描画します。

Parameters:
  center  中心の緯度経度
  zoom  ズームレベル
  layerSetId  レイヤーセットID

1番目の引数には表示される地図の中心点座標を表すLatLngクラスのオブジェクトを指定します。

例えば次のように記述します。 

var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.662484, 139.734222));

LatLngクラスについては後述します。また2番目の引数でズームレベル、3番目の引数でレイヤーセットについて指定できますがこちらは別のページで確認します。

LatLngクラス

LatLngクラスは座標を表すクラスです。次のように定義されています。 

LatLng(lat:Number, lng:Number)

地図を描画します。

Parameters:
  lat  緯度
  lng  経度

1番目の引数には緯度をあらわす値、2番目の引数には経度を表す値を指定します。指定できる値として緯度は「-90」から「+90」の間、経度は「-180」から「+180」の間で指定します。例として緯度を「35.662484」経度を「139.734222」を表す座標は次のように指定できます。 

var latlng = new Y.LatLng(35.662484, 139.734222);

地図の座標を表すLatLngクラスは、地図の中心点を指定する場合だけでなく、地図を移動する地点を指定したりマーカーを表示させる位置を指定したりなど色々な箇所で使用されます。

なお任意の地点の緯度と経度を調べる方法は「緯度と経度の取得方法」を参照して下さい。

サンプルプログラム

では実際に試してみます。下記では二つの地図を作成し、違う中心点の座標を指定しています。

code2_1.js 

window.onload = function() {
  var ymap1 = new Y.Map("map1");
  ymap1.drawMap(new Y.LatLng(43.015026,141.409793), 15);

  var ymap2 = new Y.Map("map2");
  ymap2.drawMap(new Y.LatLng(33.595298,130.362074), 15);
}

sample2_1.html 

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <title>Yahoo! JavaScriptマップAPI</title>

    <script type="text/javascript" charset="utf-8"
    src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=(id)">
    </script>

    <script src="./js/code2_1.js" type="text/javascript"></script>

  </head>
  <body>
    <p>
    JavaScriptマップAPIを使ったサンプルです。
    </p>

    <div id="map1" style="width:400px; height:150px"></div>
    <div id="map2" style="width:400px; height:150px"></div>

    <!-- Begin Yahoo! JAPAN Web Services Attribution Snippet -->
    <a href="http://developer.yahoo.co.jp/about">
    <img src="http://i.yimg.jp/images/yjdn/yjdn_attbtn1_125_17.gif" title="Webサービス by Yahoo! JAPAN" alt="Web Services by Yahoo! JAPAN" width="125" height="17" border="0" style="margin:10px 15px 15px 15px"></a>
    <!-- End Yahoo! JAPAN Web Services Attribution Snippet -->

  </body>
</html>

ブラウザでアクセスすると次のように表示されます。

p2-1

このように表示される地図の中心点の座標を指定することができます。

( Written by Tatsuo Ikura+ )

Facebook Page