例−30:GPolygonでメッシュを作る
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>例−30:GPolygonでメッシュを作る</title>
<script src="http://maps.google.co.jp/maps?file=api&v=2&key=[MAPS_API_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.677335,139.744613), 5);
//make mesh-polygon rect
var bounds = map.getBounds();
var sw = bounds.getSouthWest();
var ne = bounds.getNorthEast();
var lngSpan = ne.lng() - sw.lng();
var latSpan = ne.lat() - sw.lat();
var lngStep = lngSpan/4;
var latStep = latSpan/4;
var latOffset = lngStep/2;
var lngOffset = lngStep/2;
var colorList = [
"#FF0000"
,"#CC0000"
,"#990000"
,"#00FF00"
,"#00CC00"
,"#009900"
,"#0000FF"
,"#0000CC"
,"#000099"
];
for (var x = 0; x < 3; x++) {
for (var y = 0; y < 3; y++) {
var rect = [
new GLatLng(sw.lat() + latStep*y + latOffset, ne.lng() - lngStep*x - lngOffset)
,new GLatLng(sw.lat() + latStep*(y+1) + latOffset, ne.lng() - lngStep*x - lngOffset)
,new GLatLng(sw.lat() + latStep*(y+1) + latOffset, ne.lng() - lngStep*(x+1) - lngOffset)
,new GLatLng(sw.lat() + latStep*y + latOffset, ne.lng() - lngStep*(x+1) - lngOffset)
];
var colorIdx = Math.floor(Math.random() * colorList.length);
map.addOverlay(makePolygon(rect, colorList[colorIdx], 3, 1, colorList[colorIdx], 0.5 ));
}
}
}
}
function makePolygon(bound, strokeColor, strokeWeight, strokeOpacity, fillColor, fillOpacity){
var polygon = new GPolygon(bound, strokeColor, strokeWeight, strokeOpacity, fillColor, fillOpacity);
return polygon;
}
GEvent.addDomListener(window, "load", load);
GEvent.addDomListener(window, "unload", GUnload);
//]]>
</script>
</head>
<body >
<h1>例−30:GPolygonでメッシュを作る</h1>
<div id="map" style="width:600px;height:600px;">
</body>
</html>