在Google Map中画圆
这段时间研究了一下Google Map的API,做了个小应用:http://www.eqsafe.com/。
其中有个在地图上画圆的功能,一开始不知道怎么实现。原因是Google API只提供Polygon的画法。
后来在Google的Sample中找到一个方法,具体步骤如下:
1. 通过数学函数计算出圆周上点的经纬度;
2. 使用Polygon画出近似圆的多边形;
1
function 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![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
23
var polygon = new GPolygon(Cpoints, strokeColor, strokeWidth, strokeOpacity, fillColor, fillOpacity);
24
map.addOverlay(polygon);
25
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
24
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
25
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)