玩转百度地图（二）之画圆，高德地图、搜搜地图、搜狗地图等稍微修改即可

　　亲爱的博友，您好！之前我发表过一篇帖子为《bing map 画圆,其他百度地图、谷歌地图、搜搜地图、搜狗地图等稍微修改即可》。这个帖子详细讲述了如何在bing地图上实现画圆。可能最近大家使用百度地图较多，有很多热心博友发邮件或者私信问我，如何在百度地图上画圆。今天我们就来学习如何在百度地图上画圆，来感谢大家的支持。

　　百度地图目前已经提供了画圆API类：Circle(center:Point, radius: Number[, opts:CircleOptions])创建圆覆盖物。(自 1.1 新增)。使用起来很方便，只要传入圆中心经纬度、圆的半径就可以实现画圆。下面是我写的一个例子：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #l-map{height:500px;width:100%;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
    <title>百度地图画圆</title>
</head>
<body>
    <div id="l-map"></div>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("l-map");
    var point = new BMap.Point(113.69712352752688,34.79248399030799);
    map.centerAndZoom(point, 15);
    
    
    var circle = new BMap.Circle(point,1000);
    circle.setFillColor("#A6CBA1"); //填充颜色
    circle.setStrokeColor("#A6CBA1"); //边线颜色
    map.addOverlay(circle);            //增加圆
    
</script>

　　不过这不是画圆的唯一途径，有细心的博友会发现很多地图的原始API不提供画圆。但是大部分地图API都提供绘制多边形的覆盖物，那这样我们也可以实现画圆。原理为根据圆中心点坐标计算出圆边上若干点的具体经纬度，然后利用多边形覆盖物进行画圆。之前我的在bing上画圆的帖子就是利用这个原理进行画圆，因为在当时（现在不知）bing地图不提供直接画圆的API工具类。若你需要实现这种方式来画圆，可以私信我或者评论文章追问即可。

　　大家有地图上面的需要的探讨或者想实现什么功能都可以直接留言或者私信我，感谢支持！我会继续努力！

posted @ 2014-09-26 10:06  沙琪玛  阅读(25637)  评论(6)  编辑  收藏  举报