C#｜通过webBrowser控件实现与html间的相互传值

有时候我们需要用到C#和html文件间的相互传值，如此时我们希望通过一个html文件通过高德地图的提供的接口来获取当前坐标点周围的道路信息和兴趣点信息，用于显示在GMap.Net控件上，则可以通过webBrowser控件方便的实现。

webBrowser

WebBrowser 是一个 .NET 控件类，使用户可以在窗体中导航网页。WebBrowser 控件会占用大量资源。使用完该控件后一定要调用 Dispose 方法，以便确保及时释放所有资源。必须在附加事件的同一线程上调用 Dispose 方法，该线程应始终是消息或用户界面 (UI) 线程。

首先我们拖一个webBrowser控件到界面中，并在页面加载时加载html文件到webBrowser控件中

//加载逆解析地址的html
webBrowser.Navigate("C:\\findinfo.html");
//屏蔽webBrowser浏览器右键菜单
webBrowser.IsWebBrowserContextMenuEnabled = false;
//修改webbrowser的属性使c#可以调用js方法： 
webBrowser.ObjectForScripting = this;

C#传值给HTML

若C#传递objects的值给html里的函数里的变量CurLat, CurLng，则可通过如下代码实现：

webBrowser.Document.InvokeScript("mapInit", objects);

 function mapInit(CurLat, CurLng) {
 ｝

为实现上述功能，下面给出将当前目标点的经纬度通过C#传递给html的整体函数

C#中传递值给html里的函数

object[] objects = new object[2];
//当前纬度
objects[0] = share_data.CurLat;
//当前经度
objects[1] = share_data.CurLng;
//传值给html中的mapInit函数
webBrowser.Document.InvokeScript("mapInit", objects);

html文件script中对应的maptnit函数

 //初始化加载地图并进行地址逆解析
    function mapInit(CurLat, CurLng) {
        //默认定位：初始化加载地图时，center及level属性缺省，地图默认显示用户所在城市范围
        mapObj = new AMap.Map('iCenter');
        var lnglatXY = new AMap.LngLat(CurLng, CurLat);
        //document.getElementById('result').innerHTML = "您输入的是：" + key_1;
        //加载地理编码插件
        mapObj.plugin(["AMap.Geocoder"], function () {
            MGeocoder = new AMap.Geocoder({
                radius: 1000,
                extensions: "all"
            });
            //返回地理编码结果
            AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack2);
            //逆地理编码
            MGeocoder.getAddress(lnglatXY);
        });
        //在webBrowser上显示信息
        mapObj.setFitView();
    };

HTML传值给C#

若需要把html的函数中的变量locateinfo传值给C#的函数LocateInfo，则可以通过如下语句实现：

window.external.LocateInfo(locateinfo);

此时，在html中得出的坐标点周围的道路信息和兴趣点信息为字符串的格式，我们可将整个字符串传回C#中再对字符串分割便能得到我们需要的周围所有道路信息和兴趣点信息

对字符串的分割可根据字符串的特征进行分割，在这里，道路与兴趣点的字符串之间通过’\n\n’区分，道路与兴趣点之间的每条信息可通过’\n’区分

string[] RoadPoiDiv = message.Replace("\n\n", "-").Split('-');
string RoadInfo = RoadPoiDiv[0];
string PoiInfo = RoadPoiDiv[1];
//每个道路名称
Roadshow = RoadInfo.Split('\n');
//每个兴趣点名称
Poishow = PoiInfo.Split('\n');

下面给出html文件返回当前坐标点周围的道路信息和兴趣点信息的函数以及C#中对返回信息进行分割的函数

返回整体结果

 function geocoder_CallBack2(data) { //回调函数
        var resultStr = "";
        var roadinfo ="";
        var poiinfo="";
        var address;
        var locateinfo = "";
        var showinfo = "";
        //返回地址描述
        address = data.regeocode.formattedAddress;
        //返回周边道路信息
        roadinfo +="<table style='width:600px'>";
        for(var i=0;i<data.regeocode.roads.length;i++){
            var color = (i % 2 === 0 ? '#fff' : '#eee');
            roadinfo += "<tr style='background-color:" + color + "; margin:0; padding:0;'><td>道路：" + data.regeocode.roads[i].name + "</td><td>方向：" + data.regeocode.roads[i].direction + "</td><td>距离：" + data.regeocode.roads[i].distance + "米</td></tr>";
            //周边道路经纬度信息
            locateinfo += data.regeocode.roads[i].location.toString() + "\n";
            //道路名称
            showinfo += "道路：" + data.regeocode.roads[i].name + "\n";
        }

        roadinfo +="</table>"
        //返回周边兴趣点信息
        poiinfo += "<table style='width:600px;cursor:pointer;'>";         
        for(var j=0;j<data.regeocode.pois.length;j++){
            var color = j % 2 === 0 ? '#fff' : '#eee';
            poiinfo += "<tr onmouseover='onMouseOver(\"" + data.regeocode.pois[j].location.toString() + "\")' style='background-color:" + color + "; margin:0; padding:0;'><td>兴趣点：" + data.regeocode.pois[j].name + "</td><td>类型：" + data.regeocode.pois[j].type + "</td><td>距离：" + data.regeocode.pois[j].distance + "米</td></tr>";
            //周边兴趣点经纬度信息
            locateinfo += "\n" + data.regeocode.pois[j].location.toString();
            //周边兴趣点名称
            showinfo += "\n" + "兴趣点：" + data.regeocode.pois[j].name;

        }
        poiinfo += "</table>";
        //返回结果拼接输出
        resultStr = "<div style=\"font-size: 12px;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\">"+"<b>地址</b>："+ address + "<hr/><b>周边道路信息</b>：<br/>" + roadinfo + "<hr/><b>周边兴趣点信息</b>：<br/>" + poiinfo +"</div>";
        document.getElementById("result").innerHTML = resultStr;
        //将经纬度信息传回c#
        window.external.LocateInfo(locateinfo);
        //将名称信息传回
        window.external.ShowInfo(showinfo);
    }

将返回的信息进行进行分割

//html传回C#的经纬度信息并进行分割
    public void LocateInfo(string message)
        {
            //区分道路和兴趣点
            string[] RoadPoiDiv = message.Replace("\n\n", "-").Split('-');
            string RoadInfo = RoadPoiDiv[0];
            string PoiInfo = RoadPoiDiv[1];
            //每个道路经纬度
            string[] RoadLocate = RoadInfo.Split('\n');
            //每个兴趣点经纬度
            string[] PoiLocate = PoiInfo.Split('\n');
            //清除之前的所有图层的标记点
            foreach (var layer in gmap.Overlays)
            {
                layer.Markers.Clear();
            }
            //在地图上为每个道路打标记
            SetLableOnMap(RoadLocate, 0);
            //在地图上为每个兴趣点打标记
            SetLableOnMap(PoiLocate, 1);
        }

        //每个道路名称
        string[] Roadshow;
        //每个兴趣点名称
        string[] Poishow;

        //html传回C#的名称信息并进行分割  ####未写完
        public void ShowInfo(string message)
        {
            //区分道路和兴趣点
            string[] RoadPoiDiv = message.Replace("\n\n", "-").Split('-');
            string RoadInfo = RoadPoiDiv[0];
            string PoiInfo = RoadPoiDiv[1];
            //每个道路名称
            Roadshow = RoadInfo.Split('\n');
            //每个兴趣点名称
            Poishow = PoiInfo.Split('\n');
        }