bing map 畫圓,其他百度地圖、谷歌地圖、搜搜地圖、搜狗地圖等稍微修改即可


  最近需要在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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM