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