ポリラインの表示
広告
まずはポリラインを表現するために使用するPolylineクラスについて確認しまず。ポリラインも地物の一つですのでFeatureインターフェースを実装したクラスとなっています。
Polyline(latlngs:Array, options?:Object)
地図上に描画される線を表します。 Parameters: latlngs 線を構成する緯度経度配列 options 描画オプション
1番目の引数に線の頂点を表す座標の配列を指定します。座標はLatLngクラスのオブジェクトで表されますので結果的にLatLngクラスのオブジェクトの配列となります。(LatLngクラスについては「地図の描画とLatLngクラス」を参照して下さい)
配列に2つの座標を指定した場合には、その2つの座標を結ぶポリラインとなりますが、3つ以上の座標を指定した場合には、順に線が引かれていくことになります。例えば3つの座標A,B,Cを指定した場合は、AとB、そしてBとCを結ぶポリラインが引かれることになります。
オプションの引数である2番目の引数では、ポリラインのスタイルなどの指定などが行えます。こちらは次のページ以降で順に確認します。
具体的には次のように記述します。
var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.68025,139.7693), 15);
var linearray = [
new Y.LatLng(35.69411,139.699402),
new Y.LatLng(35.160337,136.922607),
new Y.LatLng(34.703235,136.505127)
];
var line = new Y.Polyline(linearray);
ymap.addFeature(line);
ポリラインなどの地物を地図に追加する方法などは「地物の追加と削除」を参照して下さい。
サンプルプログラム
では実際に試してみます。
window.onload = function() {
var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.487511,137.8125), 7);
var linearray = [
new Y.LatLng(35.69411,139.699402),
new Y.LatLng(36.611118,138.218994),
new Y.LatLng(35.160337,136.922607),
new Y.LatLng(35.005253,135.769043)
];
var line = new Y.Polyline(linearray);
ymap.addFeature(line);
}
<!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/code1_1.js" type="text/javascript"></script>
</head>
<body>
<p>
JavaScriptマップAPIを使ったサンプルです。
</p>
<div id="map" style="width:400px; height:300px"></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>
ブラウザでアクセスすると次のように表示されます。
今回は4つの座標を指定していますので、それぞれの頂点を指定した順にポリラインが引かれます。
( Written by T.buzz.Ikura+ )
Facebook Page