v3でそれぞれのポリンゴンのクリックイベントを取得するには?

543 views
Skip to first unread message

tog

unread,
Apr 22, 2012, 1:52:39 AM4/22/12
to Google-Maps-API-Japan
こんにちわ。

v3でマップ上にポリゴンを複数配置しています。それぞれのポリゴンがクリックされた時に、セットしていた属性を取得したいのですが、どのようにしたら
よいでしょうか?

addListenerのイベントハンドラーにポリゴンオブジェクトがあると思ったのですが、latLngしか取得できないようでした。

for poly in polygons
p = new google.maps.Polygon({path: poly.path})
p.set("title") = poly.name

google.maps.event.addListener(p, "click", (event) ->
// どのようにp.get("title")

ご教示いただけましたら幸いでございます。

taku

unread,
Apr 22, 2012, 11:48:29 AM4/22/12
to google-map...@googlegroups.com
こんばんは。

上田といいます。

getやsetが良くわかりませんが、以下のように関数でスコープを作ってやってできませんか?
ちなみに、() ->とか//があるんですが、javascriptですか?coffeescriptですか?
関数でスコープを作ってやらないと、リスナーでpを参照する際には、for文が終了しているので、最後の要素になってしまうので注意が必要です。

# coffeescriptです。
for poly in polygons
  do ->

    p = new google.maps.Polygon({path: poly.path}) 
    p.set("title") = poly.name 

    google.maps.event.addListener(p, "click",  (event) ->
       # p.get("title") でアクセスできるはず
  
検討違いの回答でしたら、ご容赦願います。

2012年4月22日日曜日 14時52分39秒 UTC+9 tog:

Masashi.K

unread,
Apr 22, 2012, 1:15:21 PM4/22/12
to google-map...@googlegroups.com
togさん

上田さんの補足です。

google.maps.Polygonクラスには、polygon.getOptions()がありません。
おそらくoptionが設定された時にキーと値を分解してしまうのでしょう。
分解したされたオプションは、プロパティとして保存されます。
なので、こんなことが可能です。

var opts = {
path: poly.path,
message : "Hello!!"
};
var poly = new google.maps.Polygon(opts);
google.maps.event.addListener(poly, function() {
alert(poly.message);
});

------

なぜそんなことができるのかというと、
google.maps.Polygonクラスは、google.maps.MVCObjectクラスを拡張しているので
MVCのset/getメソッドがあるからです。

だからこう置き換えることもできます。
google.maps.event.addListener(poly, function() {
alert(poly.get("message"));
});
------

google.maps.event.addListenerは、イベントが発生して
リスナー関数を呼び出すときに、クリックされたオブジェクトとして
呼び出してくれます。
なので、

for (poly in polygons) {
var opts = {
path : poly.path,
title : poly.name,
message : "Hello!"
};
var poly = createPolygon(opts);
google.maps.event.addListener(poly, onPolygonClicked);
}

function onPolygonClicked (evt) {
var poly = this;
alert(evt.latLng);
alert(poly.get("title"));
}

function createPolygon(opts) {
var poly = new google.maps.Polygon(opts);
return poly;
}

とこんなことができます。

------

応用技で、Polygon.getOptions() とか欲しい!とかいうのは
こんな風にすれば可能です。

参考:Polygon.getOptions() を作成する
http://googlemaps.googlermania.com/google_maps_api_v3/ja/polygon_getOptions.html

2012/4/22 taku <uedat...@gmail.com>:
> --
> このメールは Google グループのグループ「Google-Maps-API-Japan」の登録者に送られています。
> このディスカッションをウェブ上で閲覧するには、https://groups.google.com/d/msg/google-maps-api-japan/-/mnPf8FsMZTQJ
> にアクセスしてください。
>
> このグループに投稿するには、google-map...@googlegroups.com にメールを送信してください。
> このグループから退会するには、google-maps-api-...@googlegroups.com
> にメールを送信してください。
> 詳細については、http://groups.google.com/group/google-maps-api-japan?hl=ja
> からこのグループにアクセスしてください。

tog

unread,
Apr 24, 2012, 9:23:56 PM4/24/12
to Google-Maps-API-Japan
Masashi.Kさん、上田さん。お返事いただきありがとうございます。

Masashi.Kさんの方法で無事に各ポリゴンの情報を取得することができました。
ループでポリゴンを追加した場合に、最後に追加したポリゴンのイベントが発生して、クリックしたポリゴンのイベントが取得できない状態で困っていまし
た。

大変たすかりました。ありがとうございました!
> 参考:Polygon.getOptions() を作成するhttp://googlemaps.googlermania.com/google_maps_api_v3/ja/polygon_getO...
>
> 2012/4/22 taku <uedatak...@gmail.com>:
Reply all
Reply to author
Forward
0 new messages