C#调用百度地图 api

时间：2022-01-22 15:27:46

转  http://blog.csdn.net/kkkkkxiaofei/article/details/8663377

这一篇，记录一下我调用的地图API实现的功能。下面介绍的都是一些片段的节选，不能直接复制就运行。在实现之前肯定要加载地图，先放一个webbroser控件，然后如下：

  1. private void Form1_Load(object sender, EventArgs e)
  2. {
  3. string str_url = Application.StartupPath + "\\最终合并版本(昨晚修改).html";
  4. Uri url = new Uri(str_url);
  5. webBrowser1.Url = url;
  6. webBrowser1.ObjectForScripting = this;
  7. }

而为了能与JS交互，首先引入using System.Security.Permissions;，然后在namespace下必须加入两行：

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

有了上面的基础，就可以实现以下功能了。

1.鼠标放在屏幕上移动时，实时的显示坐标。

放入一个timer和一个StatusScrip：

  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. }

放入一个button命名及代码如下：

  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脚本如下：

  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. document.getElementById("mouselng").innerHTML=e.point.lng;
  10. document.getElementById("mouselat").innerHTML=e.point.lat;
  11. }
  12. }

2.开启测距工具（百度自己开发的）

拖一个按钮：

  1. //开启测距工具按钮
  2. private void btnOpenDistance_Click(object sender, EventArgs e)
  3. {
  4. webBrowser1.Document.InvokeScript("openGetDistance");
  5. }

为了加载这个工具，是需要引入百度的另一个工具库：

JS如下：

  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换成小汽车，并且显示坐标编号和坐标值，然后每放置一次，将数据存入数据库。

//放标注

  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. }

JS脚本如下：

  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. }

4.根据上面已经模拟的汽车历史坐标，可以查询具体车辆的历史轨迹（即从数据库里提取数据，画轨迹）

  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

  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. webBrowser1.Document.InvokeScript("DrawOrit1");
  20. }
  21. }
  22. //辅助方法
  23. //获取计数
  24. public int getRowsNumber()
  25. {
  26. return Rows_Num;
  27. }
  28. //根据索引获取特定坐标
  29. public double Getpoints(int index)
  30. { return pointArr[index]; }

JS脚本如下：

//------------从后台数据库获得点集合来画轨迹(无参数版本)，测试可用

  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. var PointArr=[];
  10. for(var i=0;i<=Array.length-1;i+=2)
  11. {//偶数索引存经度，奇数存维度
  12. PointArr.push(new BMap.Point(Array[i],Array[i+1]));
  13. }
  14. var polyline = new BMap.Polyline(PointArr, {strokeColor:"blue", strokeWeight:6,   strokeOpacity:0.5});  //定义折线
  15. map.addOverlay(polyline);
  16. window.external.ClearRows_num();//重置窗体计数器
  17. }

5.打开绘图工具，这个工具可以画直线，圆，矩形等等，其中我这里用的主要是画圆的方法，画好圆后，可以得到哪些车辆在这个圆内，并将其标注出来（其实就是一个预警范围）。

//开启画图工具按钮

  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. }

//搜索当前车辆位置,返回各个车辆的坐标

  1. public double SearchAllCars(int index)
  2. {
  3. string sql="select * from 汽车轨迹数据";
  4. OleDbDataReader dr= DBfunction.getread(sql);
  5. ArrayList allCars = new ArrayList();
  6. while (dr.Read())
  7. {
  8. allCars.Add(dr[2]);
  9. allCars.Add(dr[3]);
  10. }
  11. Danger_Num = allCars.Count;
  12. double[] sendto_JS = new double[allCars.Count];
  13. allCars.CopyTo(sendto_JS);
  14. return sendto_JS[index];
  15. }
  16. //全局变量，返回有危险的车辆个数
  17. public int GetdangerNum()
  18. { return Danger_Num; }

JS脚本如下：

  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. var circle_radius=e.overlay.getRadius();//半径
  13. //圆心
  14. var circle_point=new BMap.Point(e.overlay.getCenter().lng,e.overlay.getCenter().lat);
  15. //从WINFORM里取出数据
  16. var dangerCars=[];
  17. var pointlen=window.external.GetdangerNum();
  18. for(var k=0;k<=pointlen-1;k++)
  19. {
  20. dangerCars.push(window.external.SearchAllCars(k));
  21. }
  22. var BMappoints=[];//创建百度地图接口规定的数组
  23. for(var j=0;j<=dangerCars.length-1;j+=2)
  24. {
  25. BMappoints.push(new BMap.Point(dangerCars[j],dangerCars[j+1]));
  26. }
  27. for(var i=0;i<=BMappoints.length-1;i++)
  28. {
  29. if(map.getDistance(circle_point,BMappoints[i])<=circle_radius)
  30. {
  31. AddMarker(BMappoints[i]);//调用添加标注版本V3.0
  32. }
  33. }
  34. }
  35. };
  36. //线条样式
  37. var styleOptions = {
  38. strokeColor:"blue",    //边线颜色。
  39. fillColor:"blue",      //填充颜色。当参数为空时，圆形将没有填充效果。
  40. strokeWeight: 3,       //边线的宽度，以像素为单位。
  41. strokeOpacity: 1,    //边线透明度，取值范围0 - 1。
  42. fillOpacity: 0.3,      //填充的透明度，取值范围0 - 1。
  43. strokeStyle: 'solid' //边线的样式，solid或dashed。
  44. }
  45. //实例化鼠标绘制工具
  46. var drawingManager = new BMapLib.DrawingManager(map, {
  47. isOpen: true, //是否开启绘制模式
  48. enableDrawingTool: true, //是否显示工具栏
  49. drawingToolOptions: {
  50. anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
  51. offset: new BMap.Size(5, 5), //偏离值
  52. scale: 0.8, //工具栏缩放比例
  53. drawingTypes : [
  54. BMAP_DRAWING_CIRCLE,
  55. BMAP_DRAWING_RECTANGLE
  56. ]
  57. },
  58. circleOptions: styleOptions, //圆的样式
  59. rectangleOptions: styleOptions //矩形的样式
  60. });
  61. //添加鼠标绘制工具监听事件，用于获取绘制结果
  62. drawingManager.addEventListener('overlaycomplete',complete);
  63. //drawingManager.enableCalculate();
  64. //----------------------公用方法，用元素id获取元素的值-------------------
  65. function $(id){
  66. return document.getElementById(id);
  67. }
  68. //------------------画矩形，让WINFORM调用---------------
  69. function drawRec(){
  70. drawingManager.setDrawingMode(BMAP_DRAWING_RECTANGLE);}
  71. //------------------画圆，让WINFORM调用----------------
  72. function drawCircle(){
  73. drawingManager.setDrawingMode(BMAP_DRAWING_CIRCLE);}
  74. //------------------清除所有已画图形，让WINFORM调用--------------------
  75. function clearAll() {
  76. for(var i = 0; i < overlays.length; i++){
  77. map.removeOverlay(overlays[i]);
  78. }
  79. overlays.length = 0
  80. }

这个功能比较复杂，必须要加入前两行的库连接才可以。因为画圆可以得到圆心和半径，所以我只需要从数据库里取出点，然后一一测量其与圆心的距离，然后和半径比较，只要小于半径则就在圆内标注。起初头让我画矩形，画矩形的DEMO如下：

  1. //回调获得覆盖物信息，未使用该版本
  2. var overlaycomplete = function(e){
  3. overlays.push(e.overlay);
  4. var result = "";
  5. result += e.drawingMode + ":";
  6. if (e.drawingMode == BMAP_DRAWING_CIRCLE) {
  7. var circle_radius=e.overlay.getRadius();
  8. var circle_point=new BMap.Point(e.overlay.getCenter().lng,e.overlay.getCenter().lat);
  9. alert(map.getDistance(circle_point,tests[1]));
  10. for(var i=0;i<3;i++)
  11. {
  12. if(map.getDistance(circle_point,tests[i])<=circle_radius)
  13. {
  14. AddMarker(tests[i]);
  15. }
  16. }
  17. alert(result);
  18. }
  19. if (e.drawingMode == BMAP_DRAWING_POLYLINE || e.drawingMode == BMAP_DRAWING_POLYGON || e.drawingMode == BMAP_DRAWING_RECTANGLE) {
  20. result += ' 所画的点个数：' + e.overlay.getPath()[1].lng;
  21. alert(result);
  22. }
  23. };

这里是修改的百度DEMO，其中有一行result += ' 所画的点个数：' + e.overlay.getPath()[1].lng;在百度原有的demo里是这样写的result += ' 所画的点个数：' + e.overlay.getPath().length;只会返回一个数据，我仔细看了下函数名，getPath()，而且还有length的属性，那么肯定是数组，而且是返回的边或者点的个数，而边一定是由点组成的，根据之前的Ployline函数可以推测，这个函数必定是一个存放多边形点的数组，那么我就试了试e.overlay.getPath()[1].lng，看能不能取到某个点的经度值，果然不出我所料，可以的，当时兴奋了好一阵子，有了这个方法，矩形的四个点就都能记录，那么就可以跟数据库里取出的点直接进行经纬度比较，也可以标注预警范围，不过还是没有用圆方便。

由于时间确实很紧，手头还有事要做，只能写到这里了，欢迎交流，喷也行，哈哈。

相关文章