FYI:Map API v3 でポリライン・ポリゴンがサポート!

237 views
Skip to first unread message

Masashi.K

unread,
Oct 6, 2009, 9:52:40 PM10/6/09
to google-map...@googlegroups.com
FYI:Map API v3 でポリライン・ポリゴンがサポート!

Google Maps API Expert の Masashi.Kです。
少し時間が空いてしまいましたが、Google Geo Developers Blog の記事をご紹介します。

2009年6月に発表されたGoogle Maps API v3ですが、最近の活動を見ていると
Maps API v2 から Maps API v3 への移行作業が着々と進んでいるようです。
今回はポリライン・ポリゴンがサポートされました。

いくつかの機能はまだ使えないですが、最適化が自動で行われるようになったので
都道府県のような複雑な形の場合にもスムーズに動作してくれそうです。
(まだ試していませんけど・・・)

続きは以下をお読み下さいませ。
まだまだ意訳が多いので、原文を読みたい方はこちらへどうぞ。

原文:Polys in the Maps API v3: Now with Level of Detail & Holes!
(Google Geo Developers Blog)
http://googlegeodevelopers.blogspot.com/2009/09/polys-in-maps-api-v3-now-with-level-of.html
-------------------------


Maps API v3 に ポリラインとポリゴン が追加されました。
これらは地図上にラインの描画や領域を塗りつぶしたりすることができ、色の指定や塗りつぶしのスタイル、イベントハンドルを扱うことができます。
それらはサポートされている全てのブラウザで動作します。


Maps API v2のポリラインとポリゴンについても、ちょっと改良しました。

【改良点1】
ポリゴンに複数のパスを送ることができるようになりました。
ペンタゴンの例のように、ポリゴンの中に穴をあけることができます。
(添付ファイル:pentagon.png)

【改良点2】
頂点をセットしたとき、Maps API は各頂点に詳細レベルを関連付け、ズームレベルに応じた必要な量の頂点のみ表示します。
これはGoogle Maps のドライビングディレクションのルート表示と同じ方法で
あなたは何も最適化作業をする必要がなく利用することができます。
フラクタル・スノーフレークのポリラインの例を見てください。
(添付ファイル:poly_snowflake.png)

ポリライン または ポリゴンを地図に追加するのは簡単です。
このスニペット(ドキュメントの一部)を見てください。

var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);


私達はすぐに取り掛かって、早くフィードバックが欲しかったので、いくつかの機能はまだできていません。
 ・'mouseover' イベントのサポート
 ・さらなるレンダリングの最適化
 ・Google マイマップのような組み込みの編集機能

とは言うものの、このポリゴン編集の単純なデモの表示では、それができます。
(添付ファイル:poly_edit.png)

いつものことですが、ぜひフィードバックを Google Maps JS API v3 グループ にください。

投稿者:Ben Appleton (Maps API チーム)

----------------------------------

Google Maps API で サポートされているブラウザ
http://code.google.com/intl/en/apis/maps/faq.html#browsersupport

ペンタゴンの例
http://gmaps-samples-v3.googlecode.com/svn/trunk/poly/pentagon.html

フラクタル・スノーフレークの例
http://gmaps-samples-v3.googlecode.com/svn/trunk/poly/poly_snowflake.html

Google Maps API v3 ドキュメント
http://code.google.com/apis/maps/documentation/v3/overlays.html#Polylines

Google Maps JS API v3 グループ
http://groups.google.com/group/google-maps-js-api-v3

pentagon.png
poly_snowflake.png
poly_edit.png
Reply all
Reply to author
Forward
0 new messages