Google Maps で矩形塗りつぶしをやってみるがなんか微妙だと思う
塗りつぶしのメソッドが見つからないので、とりあえず、GPolyline を敷き詰めてみました。
var proj = new GMercatorProjection(18); function FillRect( sw, ne, color, opacity ) { var width = 1; var zoom = map.getZoom(); var lb = proj.fromLatLngToPixel(sw,zoom); var rt = proj.fromLatLngToPixel(ne,zoom); var l = lb.x+width/2; var b = lb.y-width/2; var r = rt.x-width/2; var t = rt.y+width/2; var x; var y1, y2; y1 = t; y2 = b; for( x = l+width; x <= r; x+= width ) { var p1 = proj.fromPixelToLatLng(new GPoint(x,y1),zoom); var p2 = proj.fromPixelToLatLng(new GPoint(x,y2),zoom); map.addOverlay(new GPolyline( [p1, p2], color, width, opacity) ); } var sw_line = proj.fromPixelToLatLng(new GPoint(l,b),zoom); var ne_line = proj.fromPixelToLatLng(new GPoint(r,t),zoom); map.addOverlay(new GPolyline( [ new GLatLng(sw_line.lat(),sw_line.lng()), new GLatLng(ne_line.lat(),sw_line.lng()), new GLatLng(ne_line.lat(),ne_line.lng()), new GLatLng(sw_line.lat(),ne_line.lng()), new GLatLng(sw_line.lat(),sw_line.lng()) ], color, width, opacity ) ); } ... FillRect(new GLatLng(34.0,135.0), new GLatLng(35.0,136.0), '#ff0000', 0.5 ); FillRect(new GLatLng(35.0,135.0), new GLatLng(36.0,136.0), '#00ff00', 0.5 ); FillRect(new GLatLng(34.0,136.0), new GLatLng(35.0,137.0), '#0000ff', 0.5 ); FillRect(new GLatLng(35.0,136.0), new GLatLng(36.0,137.0), '#ffaa00', 0.5 );
…遅い。