GoogleMapAPIで遊ぶ(2) ↑
ポリラインの描画 ↑
- ポリラインを引くには、GPolyline関数を使う。
var polyline = new GPolyline([
new GLatLng(35.38004 , 137.51826),
new GLatLng(35.38104 , 137.51926)
], "#ff0000", 5, 0.7);
map.addOverlay(polyline);
- または、次のように配列変数に読み込んでから描画。ちなみに、pushというのは、この場合、pointsという配列の最後にデータを加えるという意味。
var points = [];
points.push(new GLatLng(35.38004 , 137.51826));
points.push(new GLatLng(35.38015 , 137.51837));
points.push(new GLatLng(35.35115 , 137.51937));
points.push(new GLatLng(35.36215 , 137.52037));
points.push(new GLatLng(35.38015 , 137.51737));
map.addOverlay(new GPolyline(points, "#00ffff", 5 , 0.8));
Internet Exproler への対応 ↑
- M$社のブラウザは、ポリライン描画を独自のライブラリを使う。Vector Markup Language(VML)というらしい。で、GooglemapAPIは、ブラウザに描画機能があるときは、先にそれを使おうとする。逆にSafariやfirefoxはそれがないので、素直にサーバー側で描くことになる。つまり、IE用に対策を施す必要がある。
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
は、後ろの xmlns:v="urn:schemas-microsoft-com:vml"の部分を追加。
<style type="text/css">v?:* {behavior:url(#default#VML);}</style>
の１行を追加。ちなみに、全体は、
<!DOCTYPE html PUBLIC "-//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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<style type="text/css">v?:* {behavior:url(#default#VML);}</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=*******************"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.38004 , 137.51826), 15);
map.addControl(new GLargeMapControl());
var points = [];
points.push(new GLatLng(35.38004 , 137.51826));
points.push(new GLatLng(35.38015 , 137.51837));
points.push(new GLatLng(35.35115 , 137.51937));
points.push(new GLatLng(35.36215 , 137.52037));
points.push(new GLatLng(35.38015 , 137.51737));
map.addOverlay(new GPolyline(points, "#00ffff", 5 , 0.8));
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 500px"></div>
</body>
</html>
これでポリラインが描ける。ちなみに、ポリライン関数GPolyLineの引数の二番目は色。三番目は太さ（ピクセル）、四番目は透明度（０〜１）である。
