Winform Webbrowser Google

Winform中WebBrowser控件处理Google地图

在winform中我们许多时候要用到地图，而现在一般都是用google地图。而我也是用了两种方法处理地图。一种是用插件，Gmap.Net，这种方法在处理的地图是一个最明显的缺点是按地址搜索位置是，不是很准，一些地方也不是好控制。所以最终选择用的是WebBrowser控件承载Google地图。这种方法能满足我们基本的要求。因为它是直接访问的是Google地图。所以要在联网状态下才能访问地图。地图中的许多功能是由Javascript控制机的，这样肯定也能提高操作地图的效率。

其中对Google地图操作的功能大致有一些这些：

  1. 对地图的放大，缩小。
  2. 根据用户输入的地址，让地图显示对应的地图坐标位置。
  3. 根据用户输入的地址经纬度，让地图显示对应的地图位置。
  4. 双击获得当前位置的经纬度。
  5. 根据上面用户对地图的操作，用水滴图形对地图位置进行标记。
  6. 用户可以选择四种不同的卫星图像来显示地图，使地图呈现不同的效果。
  7. 对地图截取图片。

1.对地图的放大。主要是调用JavaScript代码，Javascript代码设置地图的放大。

代码如下： 

复制代码
function ZoomInMaps() {

            var class1 = map.getZoom()//获得地图显示的大小。;

            if (class1 < 21) {

                class1 = 15;// 设置地图缩放大小的值。

                map.setZoom(class1);//设置地图缩放的大小。

            }

        }

}
复制代码

上面有注释，看注释就明白了。

后台代码也很简单，调用代码如下：

            

?
try
 
        {
 
            mshtml.IHTMLDocument2 currentDoc = (mshtml.IHTMLDocument2)webBrowser1.Document.DomDocument;
 
            mshtml.IHTMLWindow2 win = (mshtml.IHTMLWindow2)currentDoc.parentWindow;
 
            win.execScript("ZoomInMap()", "javascript");
 
        }
 
        catch (Exception except)
 
        {
 
            MessageBox.Show(except.Message, "提示",
 
                MessageBoxButtons.OK, MessageBoxIcon.Warning);
 
        }

　　

地图的缩小跟地图的放大也是差不多的，只不过是几个属性的值不同。代码我就不贴出来了。

 

2.根据用户输入的地址，让地图显示对应的地图坐标位置。

复制代码
function codeAddress(address) {

            if (geocoder) {

                geocoder.geocode({ 'address': address }, function (results, status) {

                    if (status == google.maps.GeocoderStatus.OK) {

                        map.setCenter(results[0].geometry.location);

                        var markerPositon = results[0].geometry.location;

                        if (marker) {

                            marker.setPosition(markerPositon);

                        }

                        else {

                            marker = new google.maps.Marker({

                                map: map,

                                position: markerPositon,

                                draggable: true

                            });

                        }

 

                        markersArray.push(marker);

                        marker.setTitle(address);

 

                        document.getElementById("mouselatitute").innerHTML = markerPositon.lat();

                        document.getElementById("mouselongitude").innerHTML = markerPositon.lng();

                    } else {

                        //暂不处理。

                    }

                });

            }

        }
复制代码

后台代码：

复制代码
public string StrAddress = "";//记录用户输入的地址。

        private void 查询地址button_Click(object sender, EventArgs e)

        {

            try

            {

                if (addressTextBox.Text.Trim() != "")

                {

                    mshtml.IHTMLDocument2 currentDoc = (mshtml.IHTMLDocument2)webBrowser1.Document.DomDocument;

                    mshtml.IHTMLWindow2 win = (mshtml.IHTMLWindow2)currentDoc.parentWindow;

                    win.execScript("codeAddress(\"" + addressTextBox.Text + "\")", "javascript");//调用JavaScript。

//根据搜索地址字符串字节的多少，显示地图的大小。

                    if (!StrAddress.Equals(addressTextBox.Text) && addressTextBox.Text.Length > 6)

                    {

                        win.execScript("ZoomInMaps()", "javascript");

                    }

                    else if (!StrAddress.Equals(addressTextBox.Text) && addressTextBox.Text.Length > 2)

                    {

                        win.execScript("ZoomInMap()", "javascript");

                    }

                    else if (addressTextBox.Text.Length < 3)

                    {

                        win.execScript("ZoomCurrentMap()", "javascript");

                    }

 

                    StrAddress = addressTextBox.Text;

//获得经纬度。

                    string tag01 = webBrowser1.Document.GetElementById("mouselatitute").InnerText;

                    string tag02 = webBrowser1.Document.GetElementById("mouselongitude").InnerText;

                    double lat, lng;

                    if (double.TryParse(tag01, out lat)

                        && double.TryParse(tag02, out lng))

                    {

                        currentXYStatusLabel.Text = "当前坐标："

                            + lat.ToString("F5") + "," + lng.ToString("F5");

                        MyLong = lng;

                        MyLat = lat;

                    }

                }

            }

            catch (Exception except)

            {

                MessageBox.Show(except.Message, "提示?",

                    MessageBoxButtons.OK, MessageBoxIcon.Warning);

            }

        }
复制代码

 

3．根据用户输入的地址经纬度，让地图显示对应的地图位置。

前台代码，加载地图主要也是调用Index.htm。因为Index.htm中有根据经纬度查询的，所以在前台只需要传递经纬度值过去即可。我试了很久才试出来的，通过get方式传值（?lon=" + douLon + "&lat=" + douLat;）。也可以传值成功，没有想到跟asp.net中传递值一样。

　　　

?
　try
 
            {
 
                double douLon = double.Parse(txtLon.Text.Trim());
 
                double douLat = double.Parse(txtLat.Text.Trim());
 
                //加载地图
 
                string address = "File:\\" + Application.StartupPath + "\\Index.htm?lon=" + douLon + "&lat=" + douLat;
 
                Uri url = new Uri(address, UriKind.Absolute);
 
                webBrowser1.Url = url;
 
                webBrowser1.ScriptErrorsSuppressed = false;
 
  
 
                currentXYStatusLabel.Text = "当前坐标："
 
                            + txtLat.Text + "," + txtLon.Text;
 
            }
 
            catch (Exception except)
 
            {
 
                MessageBox.Show(except.Message, "提示！",
 
                    MessageBoxButtons.OK, MessageBoxIcon.Warning);
 
            }
 
//获得用户传递的参数。
 
        function getUrl(name) {
 
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
 
            var r = window.location.search.substr(1).match(reg);
 
            if (r != null) return unescape(r[2]); return "Please input keywords here";
 
        }
 
      //获得用户在前台传递的经纬度。
 
var getLon = getUrl("lon");
 
            var getLat = getUrl("lat");
 
            geocoder = new google.maps.Geocoder();
 
            var myLatlng = new google.maps.LatLng(getLat, getLon);
 
            var myOptions;
 
            if (getLat > 0) {
 
                myOptions = {
 
                    zoom: 12,
 
                    center: myLatlng,
 
                    disableDoubleClickZoom: true,
 
                    scaleControl: true,
 
                    mapTypeId: google.maps.MapTypeId.ROADMAP
 
                }
 
            } else {
 
                myOptions = {
 
                    zoom: 5,
 
                    center: myLatlng,
 
                    disableDoubleClickZoom: true,
 
                    scaleControl: true,
 
                    mapTypeId: google.maps.MapTypeId.ROADMAP
 
                }
 
            }
 
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

4.双击获得当前位置的经纬度。

其实双击也是由前台获得index.htm中的Javascript代码，在这儿只贴出Javascript代码，因为前台的调用跟上面的一样。其中主要是'dblclick'显示是鼠标的双击操作。这个参数也可以替换成click, mousedown, mouseup, dblclick等等Javascript的这些事件。

?
//地图双击事件。
 
            google.maps.event.addListener(map, 'dblclick', function (event) {
 
  
 
                if (event.latLng) {
 
  
 
                    document.getElementById("mouselatitute").innerHTML = event.latLng.lat();
 
  
 
                    document.getElementById("mouselongitude").innerHTML = event.latLng.lng();
 
  
 
                    var extent = map.getBounds();
 
  
 
                    document.getElementById("XMax").innerHTML = extent.getNorthEast().lng();
 
  
 
                    document.getElementById("YMax").innerHTML = extent.getNorthEast().lat();
 
  
 
                    document.getElementById("XMin").innerHTML = extent.getSouthWest().lng();
 
  
 
                    document.getElementById("YMin").innerHTML = extent.getSouthWest().lat();
 
  
 
                    document.getElementById("ZoomClass").innerHTML = map.getZoom();

6.用户可以选择四种不同的卫星图像来显示地图，使地图呈现不同的效果。

其原理跟上面的一样，也是调用Javascript完成。

?
try
 
            {
 
                mshtml.IHTMLDocument2 currentDoc = (mshtml.IHTMLDocument2)webBrowser1.Document.DomDocument;
 
                mshtml.IHTMLWindow2 win = (mshtml.IHTMLWindow2)currentDoc.parentWindow;
 
                switch (mapTypeComboBox.Text)
 
                {
 
                    case "电子地图":
 
                        win.execScript("SetRoadMap()", "javascript");
 
                        break;
 
                    case "卫星地图":
 
                        win.execScript("SetSatelliteMap()", "javascript");
 
                        break;
 
                    case "混合地图":
 
                        win.execScript("SetHybridMap()", "javascript");
 
                        break;
 
                    case "地形地图":
 
                        win.execScript("SetTerrainMap()", "javascript");
 
                        break;
 
                }
 
            }
 
            catch (Exception except)
 
            {
 
                MessageBox.Show(except.Message, "提示！",
 
                    MessageBoxButtons.OK, MessageBoxIcon.Warning);
 
            }

 

7.对地图截取图片。

在截取地图前，要对四种卫星地图进行判断。判断之后就可以掉用方法下载了。如下代码：

复制代码
if (saveBool)

            {

                int x = -1, y = -1;

                //将经纬度转换成切片序号

                LatLongToPixelXYIndex(longtitude, latitude, level, out x, out y);

                if (x != -1 && y != -1)

                {

                    WebClient wc = new WebClient();

                    address += "x=" + x.ToString() + "&y=" + y.ToString() + "&z=" + level.ToString();

                    wc.DownloadFile(address, savepath);

                    MessageBox.Show("地图图片下载成功！");

                }

            }
复制代码

 

Download Code：源代码下载

 

参考源码地址：http://download.csdn.net/download/xwebsite/3556206

posted @   悟行  阅读(4514)  评论(9)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae