昨日に引き続き Examples の Map Overlays、今日は polyline をやります。
Polyline を使うとマップ上に線分を描画して、たとえばカーナビのルート案内のようなことができます。
線を描く場合も昨日のマーカーと同じで、使うメソッドは addOverlay です。線をオーバーレイとして描画するにはこのメソッドに引数として GPolyline クラスのオブジェクトを渡します。
GPolyline では線分が経由する経緯度座標(GPoint)の配列、線の色、線の太さ、線の透明度を指定することができます。全部指定するとコンストラクタはこんな感じに:
var polyline = new GPolyline([new GPoint(-122.1419, 37.4419),
new GPoint(-122.1519, 37.4519)],
"#ff0000", 10, 0.5);
なお線の色は16進数表記のみで色名(red, blue, …)での指定はできません。線の太さは整数のピクセル数で、透明度は 0 から 1 までの少数での指定になります。
経緯度座標、線の色、線の太さ、線の透明度をランダムに変えるサンプル(examples-07)を作ってみました。要は落書きですけど。
ところで、この線をブラウザ上でどうやって実現しているのかについて説明がありますが、
In Internet Explorer browser, we use VML to draw polylines. On all other browsers, we request an image of the line from Google servers and overlay that image on the map, refreshing the image as necessary as the map is zoomed and dragged around.
Internet Explorer の場合は VML で、その他のブラウザでは Google のサーバで生成したイメージをマップ上に貼り込んでいるとのこと。VML については5日目に少し触れました。IE では VML でベクターグラフィックスがサポートされているからそれを使うが、その他ではサポートされていないからイメージを貼ってごまかす、といったところでしょうか。てっきり Firefox なんかはもう SVG サポート済みだと思ってたなあ。
Polyline を扱うときは VML の名前空間宣言と CSS の指定をお忘れなく。IE で線が描けなくて Firefox で描けるような場合はこのどちらかに問題があるはずです。
