玩转百度地图(二)之画圆,高德地图、搜搜地图、搜狗地图等稍微修改即可...
親愛的博友,您好!之前我發(fā)表過一篇帖子為《bing map 畫圓,其他百度地圖、谷歌地圖、搜搜地圖、搜狗地圖等稍微修改即可》。這個(gè)帖子詳細(xì)講述了如何在bing地圖上實(shí)現(xiàn)畫圓。可能最近大家使用百度地圖較多,有很多熱心博友發(fā)郵件或者私信問我,如何在百度地圖上畫圓。今天我們就來學(xué)習(xí)如何在百度地圖上畫圓,來感謝大家的支持。
百度地圖目前已經(jīng)提供了畫圓API類:Circle(center:Point, radius: Number[, opts:CircleOptions])創(chuàng)建圓覆蓋物。(自 1.1 新增)。使用起來很方便,只要傳入圓中心經(jīng)緯度、圓的半徑就可以實(shí)現(xiàn)畫圓。下面是我寫的一個(gè)例子:
<!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>不過這不是畫圓的唯一途徑,有細(xì)心的博友會(huì)發(fā)現(xiàn)很多地圖的原始API不提供畫圓。但是大部分地圖API都提供繪制多邊形的覆蓋物,那這樣我們也可以實(shí)現(xiàn)畫圓。原理為根據(jù)圓中心點(diǎn)坐標(biāo)計(jì)算出圓邊上若干點(diǎn)的具體經(jīng)緯度,然后利用多邊形覆蓋物進(jìn)行畫圓。之前我的在bing上畫圓的帖子就是利用這個(gè)原理進(jìn)行畫圓,因?yàn)樵诋?dāng)時(shí)(現(xiàn)在不知)bing地圖不提供直接畫圓的API工具類。若你需要實(shí)現(xiàn)這種方式來畫圓,可以私信我或者評(píng)論文章追問即可。
大家有地圖上面的需要的探討或者想實(shí)現(xiàn)什么功能都可以直接留言或者私信我,感謝支持!我會(huì)繼續(xù)努力!
轉(zhuǎn)載于:https://www.cnblogs.com/myzhijie/p/baidumap_2.html
總結(jié)
以上是生活随笔為你收集整理的玩转百度地图(二)之画圆,高德地图、搜搜地图、搜狗地图等稍微修改即可...的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 看来我的计时器的应用还要加强才行呀
- 下一篇: 分享个人预算系统源码(含说明文档)