C#調用百度地圖 api

時間  2019-11-18
標籤 c# 調用 百度 地圖 api 欄目 C# 简体版
原文   原文鏈接

轉  http://blog.csdn.net/kkkkkxiaofei/article/details/8663377javascript

 

  這一篇，記錄一下我調用的地圖API實現的功能。下面介紹的都是一些片斷的節選，不能直接複製就運行。在實現以前確定要加載地圖，先放一個webbroser控件，而後以下：css

[csharp]  view plain copy print ?
 
  1. private void Form1_Load(object sender, EventArgs e)  
  2.         {  
  3.   
  4.             string str_url = Application.StartupPath + "\\最終合併版本(昨晚修改).html";  
  5.             Uri url = new Uri(str_url);  
  6.             webBrowser1.Url = url;  
  7.             webBrowser1.ObjectForScripting = this;  
  8.                      
  9.         }  



    而爲了能與JS交互，首先引入using System.Security.Permissions;，而後在namespace下必須加入兩行：html

[csharp]  view plain copy print ?
 
  1. namespace WebBroser_Test_V1._0  
  2. {  
  3.     [PermissionSet(SecurityAction.Demand, Name = "FullTrust")]  
  4.   
  5.     [System.Runtime.InteropServices.ComVisibleAttribute(true)]  
  6.   
  7.   
  8.     public partial class Form1 : Form  
  9.     {  
  10.                public Form1()  
  11.         {  
  12.             InitializeComponent();  
  13.         }  
  14.         private void Form1_Load(object sender, EventArgs e)  
  15.         {  
  16.   
  17.             string str_url = Application.StartupPath + "\\最終合併版本(昨晚修改).html";  
  18.             Uri url = new Uri(str_url);  
  19.             webBrowser1.Url = url;  
  20.             webBrowser1.ObjectForScripting = this;  
  21.            // timer1.Enabled = true;           
  22.         }  
  23. }  


 

 

有了上面的基礎，就能夠實現如下功能了。java

1.鼠標放在屏幕上移動時，實時的顯示座標。web

放入一個timer和一個StatusScrip：正則表達式

[csharp]  view plain copy print ?
 
  1. private void timer1_Tick(object sender, EventArgs e)  
  2.         {  
  3.             try  
  4.             {  
  5.                 string tag_lng = webBrowser1.Document.GetElementById("mouselng").InnerText;  
  6.                 string tag_lat = webBrowser1.Document.GetElementById("mouselat").InnerText;  
  7.                 double dou_lng, dou_lat;  
  8.                 if (double.TryParse(tag_lng, out dou_lng) && double.TryParse(tag_lat, out dou_lat))  
  9.                 {  
  10.                     toolstatus_CurrentLocation.Text ="當前座標："+ dou_lng.ToString("F5") + "," + dou_lat.ToString("F5");  
  11.                 }  
  12.             }  
  13.             catch (Exception ee)  
  14.             { MessageBox.Show(ee.Message); }  
  15.             
  16.         }  


 

放入一個button命名及代碼以下：算法

[csharp]  view plain copy print ?
 
  1. private void btnGetLocation_Click(object sender, EventArgs e)  
  2.        {  
  3.            if (btnGetLocation.Text == "開啓實時座標")  
  4.            {  
  5.                timer1.Enabled = true;  
  6.                btnGetLocation.Text = "關閉實時座標";  
  7.            }  
  8.            else  
  9.            {  
  10.                btnGetLocation.Text = "開啓實時座標";  
  11.                timer1.Enabled = false;  
  12.            }  
  13.        }  


JS腳本以下：sql

[javascript]  view plain copy print ?
 
  1. var map =new BMap.Map("allmap");  
  2. var first_locate=new BMap.Point(108.953098,34.2778);  
  3. map.centerAndZoom(first_locate,15);     
  4. map.enableScrollWheelZoom(true);  
  5. map.addEventListener("mousemove",GetlngAndlat);     
  6. function GetlngAndlat(e)  
  7. {if(e.point.lng!=null)  
  8.  {  
  9.    
  10.  document.getElementById("mouselng").innerHTML=e.point.lng;  
  11.   document.getElementById("mouselat").innerHTML=e.point.lat;  
  12.  }  
  13. }  


 

2.開啓測距工具（百度本身開發的）數據庫

拖一個按鈕：api

[csharp]  view plain copy print ?
 
  1. //開啓測距工具按鈕  
  2.         private void btnOpenDistance_Click(object sender, EventArgs e)  
  3.         {  
  4.             webBrowser1.Document.InvokeScript("openGetDistance");  
  5.         }  


 

爲了加載這個工具，是須要引入百度的另外一個工具庫：

JS以下：

[javascript]  view plain copy print ?
 
  1. <script type="text/javascript" src="./JScript/DistanceTool_min.js"></script>  
  2. function openGetDistance()  
  3. {  
  4.  var myDis=new BMapLib.DistanceTool(map);//map爲上面已經初始化好的地圖實例  
  5.  myDis.open();  
  6. }  


 

//上面這個DistanceTool_min.js在百度的DEMO裏有，我只是把它考到個人DEBUG下了，具體路徑本身解決。

3.右擊鼠標給地圖上放marker，每個marker的icon換成小汽車，而且顯示座標編號和座標值，而後每放置一次，將數據存入數據庫。

//放標註

[csharp]  view plain copy print ?
 
  1. private void btnPutMarker_Click(object sender, EventArgs e)  
  2.        {  
  3.            if (radioButton1.Checked || radioButton2.Checked || radioButton3.Checked || radioButton4.Checked)  
  4.                webBrowser1.Document.InvokeScript("PUTANDSEND");  
  5.            else  
  6.            {  
  7.                MessageBox.Show("至少選擇一項！");  
  8.            }  
  9.        }  
  10.        //獲得Radiobutton的值  
  11.        public string setWhichCar()  
  12.        {  
  13.            if (radioButton1.Checked)  
  14.                return "1";  
  15.            if (radioButton2.Checked)  
  16.                return "2";  
  17.            if (radioButton3.Checked)  
  18.                return "3";  
  19.            if (radioButton4.Checked)  
  20.                return "4";  
  21.            return "Erro";  
  22.        }  
  23.        //將從JS裏獲得的汽車數據顯示到文本框內，而且存入數據庫  
  24.        public void PutIntotextBox(object markerIndex,object carNumber,object JSlng,object JSlat)  
  25.        {  
  26.            text_index.Text =markerIndex.ToString();  
  27.            text_num.Text = (string)carNumber;  
  28.            text_lng.Text = JSlng.ToString();  
  29.            text_lat.Text = JSlat.ToString();  
  30.            string sql = "insert into 汽車軌跡數據 values ('"+text_num.Text+"','"+text_index.Text+"','"+text_lng.Text+"','"+text_lat.Text+"','"+DateTime.Now.ToString()+"')";  
  31.            DBfunction.getcom(sql);  
  32.              
  33.        }  


       

JS腳本以下：

[javascript]  view plain copy print ?
 
  1. //---------------放標註，而且將JS的數據傳送給WINFORM------------  
  2. function PUTANDSEND()  
  3. {  
  4.   map.addEventListener("rightclick",putAndsend);  
  5. }  
  6. function putAndsend(e)  
  7. {  
  8.   //放標註  
  9.   var p1=new BMap.Point(e.point.lng,e.point.lat);  
  10.   var marker = new BMap.Marker(p1,{icon:myIcon});//將標註的圖標改成小汽車  
  11.   map.addOverlay(marker);  
  12.   marker_num++;//標註索引，這個是個全局變量  
  13.   var whichCar=window.external.setWhichCar();  
  14.   var label=new BMap.Label(whichCar+"號車-座標"+marker_num+":"+  
  15. "("+e.point.lng+","+e.point.lat+")",{offset:new BMap.Size(20,-10)});  
  16.   marker.setLabel(label);  
  17.   //給WINFORM傳值  
  18.   window.external.PutIntotextBox(marker_num,whichCar,e.point.lng,e.point.lat);  
  19.     
  20. }  



4.根據上面已經模擬的汽車歷史座標，能夠查詢具體車輛的歷史軌跡（即從數據庫裏提取數據，畫軌跡）

[csharp]  view plain copy print ?
 
  1. private void btnDrawOrit_Click(object sender, EventArgs e)  
  2.         {  
  3.             string ss = "^[0-9]*$"; //正則表達式  
  4.             string cc = text_whichCar.Text.Trim().ToString();  
  5.             bool match = Regex.IsMatch(cc, ss);  
  6.             if (Convert.ToInt32(text_whichCar.Text) > 4 || !match||text_whichCar.Text.Trim().Equals(String.Empty))  
  7.             // webBrowser1.Document.InvokeScript("PUTANDSEND");  
  8.             {  
  9.                 MessageBox.Show("您輸入的不是數字，或者編號不在範圍內！");  
  10.             }  
  11.             else  
  12.             {  
  13.                 string getdata_sql = "select * from 汽車軌跡數據 where 汽車編號=" + text_whichCar.Text;  
  14.                 whichCarData(getdata_sql);  
  15.             }  
  16.         }  


 

//從數據庫裏的取出經緯度傳送給JS
       

[csharp]  view plain copy print ?
 
  1. public void whichCarData(string limit_sql)  
  2.        {        
  3.                OleDbDataReader DR = DBfunction.getread(limit_sql);  
  4.                ArrayList a = new ArrayList();  
  5.                while (DR.Read())  
  6.                {  
  7.                    a.Add(DR[2]);//經度  
  8.                    a.Add(DR[3]);//緯度  
  9.                    Rows_Num++;  
  10.                }  
  11.                if (Rows_Num == 0)  
  12.                    MessageBox.Show("該車輛，無歷史信息！");  
  13.                else  
  14.                {  
  15.                    for (int i = 0; i <= 2 * Rows_Num - 1; i++)  
  16.                    {  
  17.                        pointArr[i] = Convert.ToDouble(a[i]);  
  18.                    }  
  19.   
  20.                    webBrowser1.Document.InvokeScript("DrawOrit1");  
  21.                }  
  22.        }  
  23.       //輔助方法  
  24.        //獲取計數  
  25.        public int getRowsNumber()  
  26.        {  
  27.            return Rows_Num;  
  28.        }  
  29. //根據索引獲取特定座標  
  30.        public double Getpoints(int index)  
  31.        { return pointArr[index]; }  



JS腳本以下：

//------------從後臺數據庫得到點集合來畫軌跡(無參數版本)，測試可用

[javascript]  view plain copy print ?
 
  1. function DrawOrit1()  
  2. {  
  3.  var Array=[];  
  4. var total_num= window.external.getRowsNumber();  
  5. for(var i=0;i<=2*total_num-1;i++)  
  6. {  
  7.  Array.push(window.external.Getpoints(i));  
  8. }  
  9.   
  10. var PointArr=[];  
  11. for(var i=0;i<=Array.length-1;i+=2)  
  12. {//偶數索引存經度，奇數存維度  
  13.   PointArr.push(new BMap.Point(Array[i],Array[i+1]));  
  14. }  
  15. var polyline = new BMap.Polyline(PointArr, {strokeColor:"blue", strokeWeight:6,   strokeOpacity:0.5});  //定義折線  
  16.   map.addOverlay(polyline);  
  17. window.external.ClearRows_num();//重置窗體計數器  
  18. }  


 


5.打開繪圖工具，這個工具能夠畫直線，圓，矩形等等，其中我這裏用的主要是畫圓的方法，畫好圓後，能夠獲得哪些車輛在這個圓內，並將其標註出來（其實就是一個預警範圍）。

//開啓畫圖工具按鈕

[csharp]  view plain copy print ?
 
  1. private void btnDrawPicture_Click(object sender, EventArgs e)  
  2.       {  
  3.           if (radio_Circle.Checked)  
  4.           { webBrowser1.Document.InvokeScript("drawCircle"); }  
  5.           else  
  6.           { webBrowser1.Document.InvokeScript("drawRec"); }  
  7.       }  


      

 //搜索當前車輛位置,返回各個車輛的座標

[csharp]  view plain copy print ?
 
  1. public double SearchAllCars(int index)  
  2.         {  
  3.              
  4.             string sql="select * from 汽車軌跡數據";  
  5.             OleDbDataReader dr= DBfunction.getread(sql);  
  6.            ArrayList allCars = new ArrayList();  
  7.             while (dr.Read())  
  8.             {  
  9.                 allCars.Add(dr[2]);  
  10.                 allCars.Add(dr[3]);  
  11.             }  
  12.             Danger_Num = allCars.Count;  
  13.             double[] sendto_JS = new double[allCars.Count];  
  14.             allCars.CopyTo(sendto_JS);  
  15.              
  16.                 return sendto_JS[index];  
  17.         }  
  18. //全局變量，返回有危險的車輛個數  
  19.         public int GetdangerNum()  
  20.         { return Danger_Num; }  


 

JS腳本以下：

[javascript]  view plain copy print ?
 
  1. <!--加載鼠標繪製工具-->  
  2. <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>  
  3. <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />  
  4. //回調得到覆蓋物的信息（修改後的版本,已測試可用）  
  5.     var complete=function(e)  
  6.    {  
  7.     overlays.push(e.overlay);  
  8.     if (e.drawingMode == BMAP_DRAWING_CIRCLE)   
  9.           {  
  10.             //隨便賦值，刷新一遍數據庫(此方法只爲演示，實際中要另考慮算法)  
  11.           var test=  window.external.SearchAllCars(0);  
  12.              
  13.              
  14.          var circle_radius=e.overlay.getRadius();//半徑  
  15.           //圓心  
  16.          var circle_point=new BMap.Point(e.overlay.getCenter().lng,e.overlay.getCenter().lat);  
  17.          //從WINFORM裏取出數據  
  18.          var dangerCars=[];  
  19.          var pointlen=window.external.GetdangerNum();  
  20.    
  21.          for(var k=0;k<=pointlen-1;k++)  
  22.           {  
  23.              dangerCars.push(window.external.SearchAllCars(k));  
  24.           }  
  25.          var BMappoints=[];//建立百度地圖接口規定的數組  
  26.          for(var j=0;j<=dangerCars.length-1;j+=2)  
  27.           {  
  28.             BMappoints.push(new BMap.Point(dangerCars[j],dangerCars[j+1]));  
  29.           }  
  30.             
  31.           for(var i=0;i<=BMappoints.length-1;i++)  
  32.           {  
  33.             if(map.getDistance(circle_point,BMappoints[i])<=circle_radius)  
  34.             {  
  35.                AddMarker(BMappoints[i]);//調用添加標註版本V3.0  
  36.             }      
  37.           }  
  38.             
  39.         }  
  40.             
  41.       };  
  42. //線條樣式  
  43.     var styleOptions = {  
  44.         strokeColor:"blue",    //邊線顏色。  
  45.         fillColor:"blue",      //填充顏色。當參數爲空時，圓形將沒有填充效果。  
  46.         strokeWeight: 3,       //邊線的寬度，以像素爲單位。  
  47.         strokeOpacity: 1,    //邊線透明度，取值範圍0 - 1。  
  48.         fillOpacity: 0.3,      //填充的透明度，取值範圍0 - 1。  
  49.         strokeStyle: 'solid' //邊線的樣式，solid或dashed。  
  50.     }  
  51.     //實例化鼠標繪製工具  
  52.     var drawingManager = new BMapLib.DrawingManager(map, {  
  53.         isOpen: true, //是否開啓繪製模式  
  54.         enableDrawingTool: true, //是否顯示工具欄  
  55.         drawingToolOptions: {  
  56.             anchor: BMAP_ANCHOR_TOP_RIGHT, //位置  
  57.             offset: new BMap.Size(5, 5), //偏離值  
  58.             scale: 0.8, //工具欄縮放比例  
  59.             drawingTypes : [           
  60.             BMAP_DRAWING_CIRCLE,    
  61.             BMAP_DRAWING_RECTANGLE   
  62.          ]  
  63.   
  64.         },  
  65.         circleOptions: styleOptions, //圓的樣式   
  66.         rectangleOptions: styleOptions //矩形的樣式  
  67.     });  
  68.   
  69.       
  70.       
  71.     //添加鼠標繪製工具監聽事件，用於獲取繪製結果  
  72.    drawingManager.addEventListener('overlaycomplete',complete);  
  73.       
  74.  //drawingManager.enableCalculate();  
  75.   
  76.       
  77.     //----------------------公用方法，用元素id獲取元素的值-------------------  
  78.     function $(id){  
  79.         return document.getElementById(id);  
  80.     }  
  81.   
  82.     //------------------畫矩形，讓WINFORM調用---------------  
  83.     function drawRec(){  
  84. drawingManager.setDrawingMode(BMAP_DRAWING_RECTANGLE);}  
  85.     //------------------畫圓，讓WINFORM調用----------------  
  86.      function drawCircle(){  
  87. drawingManager.setDrawingMode(BMAP_DRAWING_CIRCLE);}  
  88.     //------------------清除全部已畫圖形，讓WINFORM調用--------------------  
  89.     function clearAll() {  
  90.         for(var i = 0; i < overlays.length; i++){  
  91.             map.removeOverlay(overlays[i]);  
  92.         }  
  93.         overlays.length = 0  
  94.     }  


 


    這個功能比較複雜，必需要加入前兩行的庫鏈接才能夠。由於畫圓能夠獲得圓心和半徑，因此我只須要從數據庫裏取出點，而後一一測量其與圓心的距離，而後和半徑比較，只要小於半徑則就在圓內標註。起初頭讓我畫矩形，畫矩形的DEMO以下：

[javascript]  view plain copy print ?
 
  1. //回調得到覆蓋物信息，未使用該版本  
  2.     var overlaycomplete = function(e){  
  3.         overlays.push(e.overlay);  
  4.         var result = "";  
  5.          
  6.         result += e.drawingMode + ":";  
  7.          
  8.         if (e.drawingMode == BMAP_DRAWING_CIRCLE) {  
  9.              
  10.             var circle_radius=e.overlay.getRadius();  
  11.             var circle_point=new BMap.Point(e.overlay.getCenter().lng,e.overlay.getCenter().lat);  
  12.             alert(map.getDistance(circle_point,tests[1]));  
  13.              for(var i=0;i<3;i++)  
  14.           {  
  15.             if(map.getDistance(circle_point,tests[i])<=circle_radius)  
  16.             {  
  17.                AddMarker(tests[i]);  
  18.             }      
  19.           }  
  20.             alert(result);  
  21.         }  
  22.         if (e.drawingMode == BMAP_DRAWING_POLYLINE || e.drawingMode == BMAP_DRAWING_POLYGON || e.drawingMode == BMAP_DRAWING_RECTANGLE) {  
  23.             result += ' 所畫的點個數：' + e.overlay.getPath()[1].lng;  
  24.             alert(result);  
  25.         }  
  26.           
  27.     };  


 

    這裏是修改的百度DEMO，其中有一行result += ' 所畫的點個數：' + e.overlay.getPath()[1].lng;在百度原有的demo裏是這樣寫的result += ' 所畫的點個數：' + e.overlay.getPath().length;只會返回一個數據，我仔細看了下函數名，getPath()，並且還有length的屬性，那麼確定是數組，並且是返回的邊或者點的個數，而邊必定是由點組成的，根據以前的Ployline函數能夠推測，這個函數一定是一個存放多邊形點的數組，那麼我就試了試e.overlay.getPath()[1].lng，看能不能取到某個點的經度值，果真不出我所料，能夠的，當時興奮了好一陣子，有了這個方法，矩形的四個點就都能記錄，那麼就能夠跟數據庫裏取出的點直接進行經緯度比較，也能夠標註預警範圍，不過仍是沒有用圓方便。

    因爲時間確實很緊，手頭還有事要作，只能寫到這裏了，歡迎交流，噴也行，哈哈。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程