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