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