winform下利用webBrowser1控件展示地图

1、利用控件加载百度地图

2、再通过数据经纬度在地图上标注坐标点

3、点击坐标点可以打开winform 窗体

前端代码

<!--http://developer.baidu.com/map/webservice.htm-->


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>站点地图</title>
    <style type="text/css">
        body, html, #allmap
        {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
        }

        #l-map
        {
            height: 100%;
            width: 78%;
            float: left;
            border-right: 2px solid #bcbcbc;
        }

        #r-result
        {
            height: 100%;
            width: 20%;
            float: left;
        }


    </style>

    <!--<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=6c497f51c06477544e5fa6e9bd68f7c3"></script>-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=GjHGmPzAPs0hH6KIcpvmoAzt"></script>
    <link href="./Styles/SearchInfoWindow_min.css" rel="stylesheet" />
    <script type="text/javascript" src="./Gis/SearchInfoWindow_min.js"></script>
    
</head>
<body>
    <div id="allmap">
    </div>
</body>
</html>
<script type="text/javascript">

    window.onload = function () {
            /// setLocation(106.022444, 21.002545, "dddddd", "192.168.2.20", "asdf", "asdf ");
    }

    //alert("Hello World");
    var map = new BMap.Map("allmap");               // 创建Map实例

    var point = new BMap.Point(106.022444, 34.578928);    // 创建点坐标(经度,纬度)
    map.centerAndZoom(point, 5);                   // 初始化地图,设置中心点坐标和地图大小级别
    //map.addOverlay(new BMap.Marker(point));         // 给该坐标加一个红点标记

    //var traffic = new BMap.TrafficLayer();         // 创建交通流量图层实例     
    //map.addTileLayer(traffic);                     // 将图层添加到地图上   

    map.addControl(new BMap.NavigationControl());   // 添加平移缩放控件
    map.addControl(new BMap.ScaleControl());        // 添加比例尺控件
    map.addControl(new BMap.OverviewMapControl());  //添加缩略地图控件

    map.addControl(new BMap.MapTypeControl());      //添加地图类型控件
    //map.setCurrentCity("浙江");                     //设置地图显示的城市


    map.enableScrollWheelZoom();                    //启用滚轮放大缩小

    function setLocation(x, y, info, devIp, devId, alarmType,unitName) {//参数：经纬度

        //var point = new BMap.Point(x, y);
        //map.centerAndZoom(point, 5);
        //map.addOverlay(new BMap.Marker(point));


        // var infoWindow = new BMap.InfoWindow("I am here"); // 创建信息窗口对象
        //map.openInfoWindow(infoWindow, point);     //开启信息窗口


        //var marker = new BMap.Marker(point);
        //var infoWindow = new BMap.InfoWindow("I am here");

        //marker.enableDragging(); //marker可拖拽
        ////添加点击事件
        //marker.addEventListener("click", function () {
        //    map.openInfoWindow(infoWindow, point); //开启信息窗口
        //});
        //map.addOverlay(marker); //在地图中添加marker
        var icon_url = "./res/img09_l.png";
        if (alarmType == 1) {
            icon_url = "./res/img09_r.png";
        }
        var icon = new BMap.Icon(icon_url, new BMap.Size(20, 32)); //icon_url为自己的图片路径
        var address = new BMap.Point(x, y);
        var marker = new BMap.Marker(address, { icon: icon });
        map.addOverlay(marker);
        var opts = {
            width: 280  // 信息窗口宽度
            //height: 80  // 信息窗口高度
            //title: "<div >" + info + "</div>" // 信息窗口标题
        }

        var strhtml = "<div style='width:120px; height:80px; float:left'><img src='./Gis/siteimage.jpg' style='width:100px; height:80px; margin:0 20px 0 0; ' /></div>"
            + "<div style='width:140px; float:left'><div style=' font-family:微软雅黑;font-size:14px;font-weight:bold;margin-top:10px'>" + info + "探测站</div><div style=' font-family:微软雅黑;font-size:14px;font-weight:bold;margin-top:10px'>隶属单位：" + unitName + "</div>"
            + "<div style='margin-top:20px;'> <img onmouseover='this.style.cursor=\"hand\"' src='./Gis/button.jpg' onclick=\"onlineDevice('" + devIp + "','" + devId + "')\" value='查看详情' /></div></div>";

        var htminfo = " <input type='button' onclick=\"onlineDevice('" + devIp + "','" + devId + "')\" id='btnCallCSharpMethod' value='查看详情' />";
        var ddd = "<a href=\"javacript:onlineDevice('" + devIp + "','" + devId + "');\">查看详情</a><input type='button' onclick=\"onlineDevice('" + devIp + "')\" id='btnCallCSharpMethod' value='查看详情' />";
        //<a href='javacript:onlineDevice('" + devIp + "');'>查看详情</a>
        var infoWindow = new BMap.InfoWindow(strhtml, opts); // 创建信息窗口对象
        marker.addEventListener("click", function () {
            map.openInfoWindow(infoWindow, address); //开启信息窗口
        });
    }

    function onlineDevice(ip, devid) {
        //调用监控主界面cs中的方法名webOpen
        window.external.webOpen(ip, devid);
    }
   </script>

后台代码

窗体

//1、必须设置且为true,否则设置webBrowser1.ObjectForScripting对象时会报错

    [System.Runtime.InteropServices.ComVisibleAttribute(true)]
    public partial class frmMianMap : Form

  private void FrmMianMap_Load(object sender, EventArgs e)
        {
            try
            {
               
                //如果遇到脚本错误的话，默认会弹出对话框，这有时候比较烦人，不过可以关闭之
                webBrowser1.ScriptErrorsSuppressed = true;
                //需要注意添加
                webBrowser1.ObjectForScripting = this;
                 //这个文件于可执行文件放在同一目录 
                webBrowser1.Url = new Uri(Path.Combine(Application.StartupPath, "HTMLPage1.htm"));
              }

 /// <summary>
        /// 浏览器控件初始化
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
        {
            //这里传入x、y的值，调用JavaScript脚本
            setLocation(dtData);
        }

  /// <summary>
        /// 根据数据设置地图坐标位置
        /// </summary>
        /// <param name="dt"></param>
        public void setLocation(DataTable dt)
        {
            if (dt != null && dt.Rows.Count > 0)
            {
                foreach (DataRow dr in dt.Rows)
                {
                    if (dr["DEV_LONGITUDE"] != null && !string.IsNullOrEmpty(dr["DEV_LONGITUDE"].ToString()) && dr["DEV_LATITUDE"] != null && !string.IsNullOrEmpty(dr["DEV_LATITUDE"].ToString()))
                    {
                        if (alarmbll.ExistsDev(dr["DEV_ID"].ToString()))
                            webBrowser1.Document.InvokeScript("setLocation", new object[] { dr["DEV_LONGITUDE"].ToString(), dr["DEV_LATITUDE"].ToString(), dr["DEV_SITENAME"].ToString(), dr["DEV_IP"].ToString(), dr["DEV_ID"].ToString(), 1, dr["DEV_UNIT"].ToString() });
                        else
                            webBrowser1.Document.InvokeScript("setLocation", new object[] { dr["DEV_LONGITUDE"].ToString(), dr["DEV_LATITUDE"].ToString(), dr["DEV_SITENAME"].ToString(), dr["DEV_IP"].ToString(), dr["DEV_ID"].ToString(), 0, dr["DEV_UNIT"].ToString() });
                    }
                }
            }
        }

   public void webOpen(string ip, string devid)
        {
           //做自己箱多的事情
         }

1、在被调用方法类上加上[ComVisible(true)]标签，意思就是当前类可以com组件的形式供外包调用

2、在webBrowser控件中设置可被html页面调用的类即：webBrowser1.ObjectForScripting = this;前端即可通过window.external访问this对象

3、html页面调用后台方法：window.external.方法名(); 此处的window.external相当于webBrowser1.ObjectForScripting

javascript 代码中window.external的使用

2. 要在javascript代码中，修改Form窗体中的变量，或是调用它的方法，得先把这些变量和方法的定义修改成public的。
如，在Form中有个方法是public Form.BeginDownloadPage(String[] urls)
则在javascript代码中，在构造好下载链接后，通过window.external.BeginDownloadPage(String[] urls)，就可以把参数传到外部的窗口函数中，交给外部的API来处理。

3.另外要注意，需要在初始化代码中，加入一个属性设置
给 webBrowser1设置属性如下：
webBrowser1.ObjectForScripting = this;

4. 窗体类前增加以下设置：
[System.Runtime.InteropServices.ComVisibleAttribute(true)]

public partial class Form1 : Form

参考 https://blog.csdn.net/taoerchun/article/details/49782739