控件准备：新建windows窗体应用程序，添加一个标记按钮（btn_tagPos）、标签控件（经度和纬度，实时经纬度显示）、编辑框控件（记录输入的经度和纬度值)、webbroswer控件（webbroswer1）和计时器控件（timer1）
实现代码：
添加引用：
using System.Security.Permissions;
在项目的第一行添加代码：
1. [PermissionSet(SecurityAction.Demand, Name = "FullTrust")] 2. [System.Runtime.InteropServices.ComVisibleAttribute(true)]
（1）在窗体加载时，显示地图到webbroswer控件中（IndexMap.html为百度地图显示的文件）
private void Form5_Load_1(object sender, EventArgs e) { Uri url = new Uri(Application.StartupPath + "\\IndexMap.html"); webBrowser1.Url = url; webBrowser1.ObjectForScripting = this; //webBrowser1.ScriptErrorsSuppressed = true; timer1.Enabled = true; }
（2）在计时器中添加代码，用于显示实时坐标
private void timer1_Tick(object sender, EventArgs e) { try { string tag_lng = webBrowser1.Document.GetElementById("mouselng").InnerText; string tag_lat = webBrowser1.Document.GetElementById("mouselat").InnerText; double dou_lng, dou_lat; if (double.TryParse(tag_lng, out dou_lng) && double.TryParse(tag_lat, out dou_lat)) { this.lab_lb.Text = "当前坐标：" + dou_lng.ToString("F5") + "," + dou_lat.ToString("F5"); } } catch (Exception ee) { //MessageBox.Show(ee.Message); } }
（3）输入坐标显示经纬度
private void btn_tagpos_Click_1(object sender, EventArgs e) { if(txb_jingdu == null || txb_weidu == null) { MessageBox.Show("请检查是否填入了经纬度坐标！", "坐标错误提示"); return; } //"116.399", " 39.910" object[] args = { txb_jingdu.Text, txb_weidu.Text}; webBrowser1.Document.InvokeScript("addMarker", args); }
对应html文件的JScript代码，首先清除已有标记，然后在添加新的标记：
function addMarker(x, y) { map.clearOverlays(); //清除地图中已有的标记 var point = new BMap.Point(x, y); var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); //用于添加标记 map.centerAndZoom(point, 11); //用于将地图缩放至输入的坐标点 }
拓展代码：deletePoint函数，先调用getOverlays()函数用于得到所有覆盖物信息；再调用的removeOverlay()函数是一次移除一个指定覆盖物
function deletePoint(){ var allOverlay = map.getOverlays(); for (var i = 0; i < allOverlay.length -1; i++){ if(allOverlay[i].getLabel().content == "我是id=1"){ map.removeOverlay(allOverlay[i]); return false; } } }
附件：用到的IndexMap.html文件
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello Map</title> <script type="text/javascript"src="http://api.map.baidu.com/api?key=59db371659c04947a1ff044e80565718&v=1.4&services=true"> </script> <!--加载鼠标测距工具--> <script src="DistanceTool_min.js" type="text/javascript"></script> <!--加载鼠标绘制工具--> <script type="text/javascript" src="DrawingManager_min.js"></script> <link rel="stylesheet" href="DrawingManager_min.css" /> </head> <body> <div id="mouselng" style="visibility:hidden"></div> <div id="mouselat" style="visibility:hidden"></div> <div style="width:1000px;height:600px;border:1px solid gray" id="container"> </div> </body> </html> <script type="text/javascript"> var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(108.876433, 36.269395), 5); map.addControl(new BMap.ScaleControl()); //添加比例尺控件(左下角显示的比例尺控件) map.addControl(new BMap.OverviewMapControl());// 缩略图控件 var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE }); map.addControl(ctrl_nav);//添加标准地图控件(左上角的放大缩小左右拖拽控件) map.enableDragging(); //启用地图拖拽事件，默认启用(可不写) map.enableScrollWheelZoom(); //启用地图滚轮放大缩小 map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写) map.enableKeyboard(); //启用键盘上下左右键移动地图 map.enableContinuousZoom(); // 开启连续缩放效果 map.enableInertialDragging(); // 开启惯性拖拽效果 //实时显示地图坐标 strat map.addEventListener("mousemove",GetlngAndlat); function GetlngAndlat(e) { if(e.point.lng!=null) { document.getElementById("mouselng").innerHTML=e.point.lng; document.getElementById("mouselat").innerHTML=e.point.lat; } } //实时显示地图坐标 end //测量距离 strat function openGetDistance() { var myDis=new BMapLib.DistanceTool(map);//map为上面已经初始化好的地图实例 myDis.open(); } //测量距离 end //左右击鼠标给地图上放marker strat 放标注，并且将JS的数据传送给WINFORM function PUTANDSEND() { //右键标记 map.addEventListener("rightclick", putAndsend); //左键标记 //map.addEventListener("click", putAndsend); } var marker_num = 0; function putAndsend(e) { //放标注 var p1=new BMap.Point(e.point.lng,e.point.lat); var myIcon = new BMap.Icon("png-0003.png", new BMap.Size(24, 24)); var marker = new BMap.Marker(p1, { icon: myIcon }); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 marker_num++;//标注索引，这个是个全局变量 var whichCar=window.external.setWhichCar(); var label=new BMap.Label(whichCar+"号车-坐标"+marker_num+":"+ "("+e.point.lng+","+e.point.lat+")",{offset:new BMap.Size(20,-10)}); marker.setLabel(label); //给WINFORM传值 window.external.PutIntotextBox(marker_num,whichCar,e.point.lng,e.point.lat); } //左右击鼠标给地图上放marker end //在地图上画轨迹 strat function DrawOrit1() { var Array=[]; var total_num= window.external.getRowsNumber(); for(var i=0;i<=2*total_num-1;i++) { Array.push(window.external.Getpoints(i)); } var PointArr=[]; for(var i=0;i<=Array.length-1;i+=2) {//偶数索引存经度，奇数存维度 PointArr.push(new BMap.Point(Array[i],Array[i+1])); } var polyline = new BMap.Polyline(PointArr, {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}); //定义折线 map.addOverlay(polyline); window.external.ClearRows_num();//重置窗体计数器 } //在地图上画轨迹 end //在地图上画圆形或者方形 strat // 编写自定义函数，创建标注 function addMarker(point) { var myIcon = new BMap.Icon("png-0003.png", new BMap.Size(24, 24)); var marker = new BMap.Marker(point, { icon: myIcon }); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 } function addMarker(x, y) { map.clearOverlays(); var point = new BMap.Point(x, y); var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); map.centerAndZoom(point, 11); } var overlays = []; var complete=function(e) { overlays.push(e.overlay); if (e.drawingMode == BMAP_DRAWING_CIRCLE) { //随便赋值，刷新一遍数据库(此方法只为演示，实际中要另考虑算法) var test= window.external.SearchAllCars(0); var circle_radius=e.overlay.getRadius();//半径 //圆心 var circle_point=new BMap.Point(e.overlay.getCenter().lng,e.overlay.getCenter().lat); //从WINFORM里取出数据 var dangerCars=[]; var pointlen=window.external.GetdangerNum(); for(var k=0;k<=pointlen-1;k++) { dangerCars.push(window.external.SearchAllCars(k)); } var BMappoints=[];//创建百度地图接口规定的数组 for(var j=0;j<=dangerCars.length-1;j+=2) { BMappoints.push(new BMap.Point(dangerCars[j],dangerCars[j+1])); } for(var i=0;i<=BMappoints.length-1;i++) { if(map.getDistance(circle_point,BMappoints[i])<=circle_radius) { //AddMarker(BMappoints[i]);//调用添加标注版本V3.0 var myIcon = new BMap.Icon("png-0003.png", new BMap.Size(24, 24)); var marker1 = new BMap.Marker(BMappoints[i], { icon: myIcon }); // 创建标注 map.addOverlay(marker1); // 将标注添加到地图中 } } } }; //线条样式 var styleOptions = { strokeColor:"blue", //边线颜色。 fillColor:"blue", //填充颜色。当参数为空时，圆形将没有填充效果。 strokeWeight: 3, //边线的宽度，以像素为单位。 strokeOpacity: 1, //边线透明度，取值范围0 - 1。 fillOpacity: 0.3, //填充的透明度，取值范围0 - 1。 strokeStyle: 'solid' //边线的样式，solid或dashed。 } //实例化鼠标绘制工具 var drawingManager = new BMapLib.DrawingManager(map, { isOpen: true, //是否开启绘制模式 enableDrawingTool: true, //是否显示工具栏 drawingToolOptions: { anchor: BMAP_ANCHOR_TOP_RIGHT, //位置 offset: new BMap.Size(5, 5), //偏离值 scale: 0.8, //工具栏缩放比例 drawingTypes : [ BMAP_DRAWING_CIRCLE, BMAP_DRAWING_RECTANGLE ] }, circleOptions: styleOptions, //圆的样式 rectangleOptions: styleOptions //矩形的样式 }); //添加鼠标绘制工具监听事件，用于获取绘制结果 drawingManager.addEventListener('overlaycomplete', complete); //回调获得覆盖物信息，未使用该版本 var overlaycomplete = function (e) { overlays.push(e.overlay); var result = ""; result += e.drawingMode + ":"; if (e.drawingMode == BMAP_DRAWING_CIRCLE) { var circle_radius = e.overlay.getRadius(); var circle_point = new BMap.Point(e.overlay.getCenter().lng, e.overlay.getCenter().lat); alert(map.getDistance(circle_point, tests[1])); for (var i = 0; i < 3; i++) { if (map.getDistance(circle_point, tests[i]) <= circle_radius) { //AddMarker(tests[i]); var myIcon = new BMap.Icon("png-0003.png", new BMap.Size(24, 24)); var marker1 = new BMap.Marker(tests[i], { icon: myIcon }); // 创建标注 map.addOverlay(marker1); // 将标注添加到地图中 } } alert(result); } if (e.drawingMode == BMAP_DRAWING_POLYLINE || e.drawingMode == BMAP_DRAWING_POLYGON || e.drawingMode == BMAP_DRAWING_RECTANGLE) { result += ' 所画的点个数：' + e.overlay.getPath()[1].lng; alert(result); } }; //drawingManager.enableCalculate(); //----------------------公用方法，用元素id获取元素的值------------------- function $(id){ return document.getElementById(id); } //------------------画矩形，让WINFORM调用--------------- function drawRec(){ drawingManager.setDrawingMode(BMAP_DRAWING_RECTANGLE);} //------------------画圆，让WINFORM调用---------------- function drawCircle(){ drawingManager.setDrawingMode(BMAP_DRAWING_CIRCLE);} //------------------清除所有已画图形，让WINFORM调用-------------------- function clearAll() { for(var i = 0; i < overlays.length; i++){ map.removeOverlay(overlays[i]); } overlays.length = 0 } //在地图上画圆形或者方形 end </script>
