Winform下调用百度地图

百度开发指南：http://lbsyun.baidu.com/index.php?title=jspopular

一、申请密钥

如上图所示:使用百度地图的API首先要申请一个密钥，应用名称随便填写，应用类型选择浏览器，白名单填写符号 * ，之后提交后会获得一个密钥。

二、新建winform工程

1、新建一个winform工程

2、在winform下添加一个HTML页面

解决方案资源管理器 - 右键 - 添加 -新建项添加HTML页

3、编写winform工程

（1）添加一个WebBrowser控件到窗口中，用来显示web页面内容。

（2）修改winfrom后端

1）运行HTML需要添加一个名称空间

using System.Security.Permissions;

2）在主窗口类中添加JS运行的必要代码

  
   [PermissionSet(SecurityAction.Demand, Name = "FullTrust")]//调用JS代码必要
    [System.Runtime.InteropServices.ComVisibleAttribute(true)]   
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            try
            {
                string str_url = Application.StartupPath + "../HTMLPage1.html";// 添加自己添加的html文件名，注意使用相对路径的方法 HTMLPage1.html要复制到debug目录下
                Uri url = new Uri(str_url);
                webBrowser1.Url = url;
                webBrowser1.ObjectForScripting = this;
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message, "异常", MessageBoxButtons.OK, MessageBoxIcon.Error);
            }
        }
}

（3）编写HTML页面

先试试百度地图示例DEMO,如使用地图展示功能。

只需要把上图中的代码复制到自己的HTML里，并将“您的密钥” 替换成自己前面申请的密钥即可。

（2）最后运行，即可在自己的winform窗口下实现该功能。

至此一个基本的调用百度地图的功能已经实现，要想增加地图的功能，可以参照百度地图API提供的DEMO示例，对照开发手册增加功能。

三、HTML与winfrom参数传递的实现

上面中HTML页面与winform的后台，没有参数的传递，下面详细讲解winfrom后台如何获取HTML页面的数据，如何调用HTML页面下用JS编写的函数以及函数参数传递的问题。

1、winfrom获取HTML界面数据,并显示在winfrom界面中

如：HTML获取界面的鼠标位置，变转换成经纬度传递 winfrom后台。并显示。

（1）HTML下编写鼠标监听事件，并获取鼠标位置对应的经纬度。

 //实时显示地图坐标 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;
        }
    }

（2）winfrom后端获取前端的经纬度，并显示。

这里用一个定时器，定时器的中断时间设置为1ms，中断时显示经纬度。

 //定时器中断，显示鼠标的经纬度
        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)) //字符串转double数据
                {
                    this.toolStripLabel1.Text = "当前坐标：" + dou_lng.ToString("F5") + "," + dou_lat.ToString("F5");
                }
            }
            catch (Exception ee)
            {
                //MessageBox.Show(ee.Message); 
            }  
        }

2、winfrom调用HTML的JS函数，并传递参数

如后端发送一个经纬度信息传递到前端，并定位其对应的位置。

（1）前端编写

 //winform传入经纬度，并获取地图中心点
    function setLocation(x, y) {
        map.clearOverlays();
        var point = new BMap.Point(x, y);// 创建点坐标(经度,纬度)
        // map.centerAndZoom(point, 11);
        var marker1 = new BMap.Marker(point);  // 创建标注
        map.addOverlay(marker1); // 给该坐标加一个红点标记
        map.panTo(point);

    }

（2）后端调用


        //外部查询按钮
        private void toolStripButton1_Click(object sender, EventArgs e)
        {
            //这里传入x、y的值，调用JavaScript脚本
            webBrowser1.Document.InvokeScript("setLocation", new object[] { 121.504, 30 });
        }

Winform下调用百度地图

猜你喜欢