在Google Map中画圆
这段时间研究了一下Google Map的API,做了个小应用:http://www.eqsafe.com/。
其中有个在地图上画圆的功能,一开始不知道怎么实现。原因是Google API只提供Polygon的画法。
后来在Google的Sample中找到一个方法,具体步骤如下:
1. 通过数学函数计算出圆周上点的经纬度;
2. 使用Polygon画出近似圆的多边形;
1function drawCircle(lat, lng, radius, strokeColor, strokeWidth, strokeOpacity, fillColor, fillOpacity) {
2 var d2r = Math.PI / 180;
3 var r2d = 180 / Math.PI;
4 var Clat = radius * 0.014483; // Convert statute miles into degrees latitude
5 var Clng = Clat / Math.cos(lat * d2r);
6 var Cpoints = [];
7
8 // 计算圆周上33个点的经纬度,若需要圆滑些,可以增加圆周的点数
9 for (var i = 0; i < 33; i++) {
10 var theta = Math.PI * (i / 16);
11 Cy = lat + (Clat * Math.sin(theta));
12 Cx = lng + (Clng * Math.cos(theta));
13 var P = new GPoint(Cx, Cy);
14 Cpoints.push(P);
15 }
16
17 strokeColor = strokeColor || "#0055ff"; // 边框颜色,默认"#0055ff"
18 strokeWidth = strokeWidth || 1; // 边框宽度,默认1px
19 strokeOpacity = strokeOpacity || 1; // 边框透明度,默认不透明
20 fillColor = fillColor || strokeColor; // 填充颜色,默认同边框颜色
21 fillOpacity = fillOpacity || 0.1; // 填充透明度,默认0.1
22
23 var polygon = new GPolygon(Cpoints, strokeColor, strokeWidth, strokeOpacity, fillColor, fillOpacity);
24 map.addOverlay(polygon);
25}
2 var d2r = Math.PI / 180;
3 var r2d = 180 / Math.PI;
4 var Clat = radius * 0.014483; // Convert statute miles into degrees latitude
5 var Clng = Clat / Math.cos(lat * d2r);
6 var Cpoints = [];
7
8 // 计算圆周上33个点的经纬度,若需要圆滑些,可以增加圆周的点数
9 for (var i = 0; i < 33; i++) {
10 var theta = Math.PI * (i / 16);
11 Cy = lat + (Clat * Math.sin(theta));
12 Cx = lng + (Clng * Math.cos(theta));
13 var P = new GPoint(Cx, Cy);
14 Cpoints.push(P);
15 }
16
17 strokeColor = strokeColor || "#0055ff"; // 边框颜色,默认"#0055ff"
18 strokeWidth = strokeWidth || 1; // 边框宽度,默认1px
19 strokeOpacity = strokeOpacity || 1; // 边框透明度,默认不透明
20 fillColor = fillColor || strokeColor; // 填充颜色,默认同边框颜色
21 fillOpacity = fillOpacity || 0.1; // 填充透明度,默认0.1
22
23 var polygon = new GPolygon(Cpoints, strokeColor, strokeWidth, strokeOpacity, fillColor, fillOpacity);
24 map.addOverlay(polygon);
25}