MapsAPIV3のポリゴンの重なり部分について

Local.T

unread,

Sep 22, 2011, 1:13:54 AM9/22/11

to Google-Maps-API-Japan

初めまして。最近GoogleMapsAPIを始めた者です。

Google Maps API V3を使って下記のようなものを作っているのですが、ポリゴンをドーナツ状に中抜きするところがうまくいきません。
IE9ではちゃんと中抜きで表示されたのですが、Chrome、FireFox6.0ではポリゴンの中にポリゴンを表示する感じになり中抜きできていま
せん。
少し調べたところwebkitを使うブラウザが関係しているらしいのですが、あまり詳しくないので対処法がよくわかりません。
なんとかしてIE以外のブラウザでも中抜きで表示できる方法はないのでしょうか？

以下htmlファイル内容

<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://maps.google.com/maps/
api/js?sensor=false"></script>
<script type="text/javascript">

function initialize(){
var latlng = new google.maps.LatLng(34.9828443,134.8152930);
var myOptions = {
zoom: 11,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map=new
google.maps.Map(document.getElementById("map_canvas"), myOptions);

var points = new google.maps.MVCArray();
points = [[
//内側左
new google.maps.LatLng(35.0105297,134.7804922),
new google.maps.LatLng(34.9828443,134.8152930),
new google.maps.LatLng(34.9880356,134.8415094),
new google.maps.LatLng(35.0140464,134.8298960)
],[
//内側右
new google.maps.LatLng(35.0223434,134.9409881),
new google.maps.LatLng(35.0152870,134.8930235),
new google.maps.LatLng(34.9896701,134.8879720),
new google.maps.LatLng(34.9853469,134.9377695),
new google.maps.LatLng(35.0059232,134.9603780)
],[
　　　　　　　 //外側
new google.maps.LatLng(35.0436558,134.9558949),
new google.maps.LatLng(35.0456312,134.7534714),
new google.maps.LatLng(34.9624730,134.7571150),
new google.maps.LatLng(34.9591221,134.9682897)
]];
var polyopts = {
paths: points,
strokeWeight: 3,
strokeColor: "#aa1232",
strokeOpacity: 0.6,
fillColor: "#aaa0ff",
fillOpacity: 0.4
};
var polygon = new google.maps.Polygon(polyopts);
polygon.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 600px; height: 400px"></div>
</body>
</html>

yo

unread,

Sep 22, 2011, 3:11:26 AM9/22/11

to google-map...@googlegroups.com

初めまして。

http://www.geocodezip.com/
^ここのDonut Polygonのサンプルは正しく表示されるでしょうか？
複雑なサンプルを見てもらえば分かりますが、外か内か、という問題は結構複雑なんですよね＾＾；

で、内側のパスを逆方向に並べてもらうと、おそらく中抜きで表示されますよ

# ちょっと会社にいるもんで簡単に失礼します

Masashi.K

unread,

Sep 22, 2011, 3:14:55 AM9/22/11

to google-map...@googlegroups.com

yoさん

いいですね、このリンク集。

> で、内側のパスを逆方向に並べてもらうと、おそらく中抜きで表示されますよ

例えばこれとかですね。Chrome/FF on Mac ではちゃんと表示されてますよ。
http://www.geocodezip.com/v3_polygon_example_donut.html

2011/9/22 yo <yooki...@gmail.com>:

> --
> このメールは Google グループのグループ「Google-Maps-API-Japan」の登録者に送られています。
> このグループに投稿するには、google-map...@googlegroups.com にメールを送信してください。
> このグループから退会するには、google-maps-api-...@googlegroups.com にメールを送信してください。
> 詳細については、http://groups.google.com/group/google-maps-api-japan?hl=ja からこのグループにアクセスしてください。
>
>

Local.T

unread,

Sep 22, 2011, 7:19:14 AM9/22/11

to Google-Maps-API-Japan

yoさん、Masashi.Kさん
ありがとうございます。
リンク先のコードを見て直したら無事表示できました。

外側のポリゴンの緯度経度の回り方と逆に内側のポリゴンの緯度経度を入力していけばよかったのですね。
外側が時計回りなら、内側を反時計回り。外側が反時計回りなら、内側は時計回りに緯度経度を入力、というように。

行き詰っていたところなので本当に助かりました。

Reply all

Reply to author

Forward