緯度と経度をエンコード化して、簡単に地図の中に複数の線を書く（ポリライン polyline）

スポンサードリンク

緯度と経度をエンコード化して、簡単に地図の中に複数の線を書く（ポリライン polyline）

Posted by 管理人 on 2012年11月7日 Leave a comment (3) Go to comments

地図の中に簡単に線が書けないものか・・・・・。ポリラインの座標をいちいち入力してられないですよね。

ふとGoogle先生のデモを見ていて、エンコード済みポリラインを使う方法があることに気がつきました。これは便利そう。

さて、本題・・・

1.ライブラリジオメトリの宣言

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=geometry"></script>

2.さて、エンコード化されたポリラインを表示させるには

エンコード化ポリラインをgoogle.maps.geometry.encoding.decodePathを使って、new google.maps.Polylineのpath設定に渡してやればOKです（このページを参考にしました）。

なお、下記のvar eccoded_path で指定するエンコード化されたポリライン記述（下記赤文字部）は、コチラの「ポリライン収得」マップで入手下さい。上記グーグル先生のエンコーダよりも使いやすいように少しいじってあります（アイコンの移動、削除に対応）。

また、ポリラインの色、線の透明度、線の幅は、下記青色文字部で指定します。

	var encoded_path = 'yb}xEm}zrYryRwXxvLaz]ppE{km@kvSu~_@}jHhhCi|]xhh@r{Sr~j@dbEp|H';
	var decoded_path = google.maps.geometry.encoding.decodePath(encoded_path);

	var polyOptions = 
	{
        path: decoded_path , 
 　　　　strokeColor: "#dc143c" , //線色 
　　　　 strokeOpacity: 1.0 , //透明度0.0-1.0の範囲で指定 
 　　　　strokeWeight: 5 ,//幅（pixel）
        map: map
	}
	polyline = new google.maps.Polyline(polyOptions);

通常の座標で書きたければこんな感じで

   var coordination = [new google.maps.LatLng(37.27, -122.21),new google.maps.LatLng(38.48, -123.85)];
	var polyOptions = 
	{
        path: coordination , 
        strokeColor: "#dc143c" , //線色 
        strokeOpacity: 1.0 , //透明度0.0-1.0 
        strokeWeight: 5 ,//幅pixel 
        map: map
	}
	polyline = new google.maps.Polyline(polyOptions);

3.コピペ用

せっかくですので3種類のポリラインを表示させてみます。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>緯度と経度をエンコード化して、簡単に地図の中に複数の線を書く（ポリライン polyline）</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=geometry"></script>
<script type="text/javascript">
var polyline;
function initialize() 
{
	var myOptions =
	{
        zoom: 8,
        center: new google.maps.LatLng(35.666989,139.708794),
        mapTypeId: google.maps.MapTypeId.ROADMAP
	};

	var map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);		

//polyline1
	var encoded_path = 'yb}xEm}zrYryRwXxvLaz]ppE{km@kvSu~_@}jHhhCi|]xhh@r{Sr~j@dbEp|H';
	var decoded_path = google.maps.geometry.encoding.decodePath(encoded_path);

	var polyOptions = 
	{
        path: decoded_path , 
        strokeColor: "#dc143c" , //線色 
        strokeOpacity: 1.0 , //透明度0.0-1.0 
        strokeWeight: 5 ,//幅pixel 
        map: map
	}
	polyline = new google.maps.Polyline(polyOptions);

//polyline2
	var encoded_path2 = 'ki{wEohdrYvs`@kdaB{dHmtm@smjA}xeAazg@v}q@i|OroaAfaEpdkAjk]~kb@laj@h}L';
	var decoded_path2 = google.maps.geometry.encoding.decodePath(encoded_path2);

	var polyOptions2 = 
	{
        path: decoded_path2 , 
        strokeColor: "#6090ef" , //線色
        strokeOpacity: 0.3 , //透明度0.0-1.0
        strokeWeight: 20 , //幅pixel
        map: map
	}
	polyline = new google.maps.Polyline(polyOptions2);

//polyline3
	var encoded_path3 = '{yy{EqvcoYjlvC~lEotaDijp@v`xCh}LecqCswg@|ccCjoFzyb@_fBxkXzflAftOgppAblJfbjAduO{flA|hKpvdA';
	var decoded_path3 = google.maps.geometry.encoding.decodePath(encoded_path3);

	var polyOptions3 = 
	{
        path: decoded_path3 , 
        strokeColor: "#ff00ff" , //線色
        strokeOpacity: 0.7 , //透明度0.0-1.0 
        strokeWeight: 10 ,//幅pixel 
        map: map
	}
	polyline = new google.maps.Polyline(polyOptions3);

	polyline.setMap(map);
}
window.onload = initialize;
</script>
</head>
<body>
<div id="map_canvas" style="width : 700px;height : 500px;"></div>
</body>
</html>