最近需要在bing 地圖上畫圓,因為bing 地圖沒有直接提供畫圓的API,畫起來比較麻煩,經過在網上的查找終於找到了畫圓的方法。下面的代碼是我整理過的代碼,其中畫圓函數來至網絡。因為畫圓比較困難,所以分享給大家,讓大家也少走彎路。
如果你使用的是其他地圖,例如百度地圖、谷歌地圖、搜搜地圖、搜狗地圖等,適當修改提供的api接口即可實現。如果需要進行地圖的定制開發,請發送站內信給我。
上代碼,呵呵。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>bing map畫圓</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=zh-cn"></script> <script type="text/javascript"> var map = null; function GetMap() { map = new VEMap('myMap'); map.LoadMap(); map.SetZoomLevel(14); var latLon=new VELatLong(34.79248399030799,113.69712352752688); //設置地圖中心點 map.SetCenter(latLon); map.SetMouseWheelZoomToCenter(false); //畫圓,以地圖中心latLon為圓心,半徑為1km 畫圓 drawCircle(latLon,1); } //畫圓函數 origin 圓心,radius 半徑 單位km function drawCircle(origin, radius) { var earthRadius = 6371; //圓心緯度 var lat = (origin.Latitude * Math.PI) / 180; //圓心經度 var lon = (origin.Longitude * Math.PI) / 180; var d = parseFloat(radius) / earthRadius; var points = new Array(); for (i = 0; i <= 360; i++) { var point = new VELatLong(0, 0); var bearing = i * Math.PI / 180; point.Latitude = Math.asin(Math.sin(lat) * Math.cos(d) + Math.cos(lat) * Math.sin(d) * Math.cos(bearing)); point.Longitude = ((lon + Math.atan2(Math.sin(bearing) * Math.sin(d) * Math.cos(lat), Math.cos(d) - Math.sin(lat) * Math.sin(point.Latitude))) * 180) / Math.PI; point.Latitude = (point.Latitude * 180) / Math.PI; points.push(point); } var circle = new VEShape(VEShapeType.Polygon, points); //設置無邊緣 circle.SetLineColor(new VEColor(255, 0, 0, 0)); circle.HideIcon(); map.AddShape(circle); } </script> </head> <body onload="GetMap();"> <div id='myMap' style="position: relative; width: 400px; height: 400px;"></div> </body> </html>