Winform Webbrowser Google

Winform中WebBrowser控件处理Google地图

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

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

对地图的放大，缩小。

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

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

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

根据上面用户对地图的操作，用水滴图形对地图位置进行标记。

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

对地图截取图片。

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 @ 2012-04-13 09:52 悟行阅读(4495) 评论(9) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

ArnoldZhang

Winform Webbrowser Google

公告