C# winform窗體使用WebBrowser控制元件顯示百度地圖
阿新 • • 發佈：2019-02-18
個人微信公眾號：“免費桌面小應用”。有新程式會微信推送通知。謝謝大家掃描關注。
突然想試試winfrom窗體呼叫html頁面並顯示頁面內容。
就拿展示地圖來試試。先上效果圖：
下面是專案建立的過程：
一、開啟vs---新建專案
專案選擇windows窗體專案。名字隨便取。
二、右鍵專案-->新增--->選擇新建項。
選擇左邊web下的html頁
三。現在專案下應該有一個窗體和一個html頁了。程式碼部分
winfrom窗體設定--->無邊框。控制元件都有如圖：自己對照修改屬性。
HTMLMap.html頁程式碼---->複製即可
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="keywords" content="百度地圖,百度地圖API，百度地圖自定義工具，百度地圖所見即所得工具" /> <meta name="description" content="百度地圖API自定義地圖，幫助使用者在視覺化操作下生成百度地圖" /> <title>百度地圖API自定義地圖</title> <!--引用百度地圖API--> <style type="text/css"> html, body { margin: 0; padding: 0; } .iw_poi_title { color: #CC5522; font-size: 14px; font-weight: bold; overflow: hidden; padding-right: 13px; white-space: nowrap; } .iw_poi_content { font: 12px arial,sans-serif; overflow: visible; padding-top: 4px; white-space: -moz-pre-wrap; word-wrap: break-word; } </style> <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script> </head> <body> <!--百度地圖容器815, 456--> <div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div> </body> <script type="text/javascript"> //建立和初始化地圖函式： function initMap() { createMap();//建立地圖 setMapEvent();//設定地圖事件 addMapControl();//向地圖新增控制元件 } //建立地圖函式： function createMap() { var map = new BMap.Map("dituContent");//在百度地圖容器中建立一個地圖 var point = new BMap.Point(116.395645, 39.929986);//定義一箇中心點座標 map.centerAndZoom(point, 12);//設定地圖的中心點和座標並將地圖顯示在地圖容器中 window.map = map;//將map變數儲存在全域性 } //地圖事件設定函式： function setMapEvent() { map.enableDragging();//啟用地圖拖拽事件，預設啟用(可不寫) map.enableScrollWheelZoom();//啟用地圖滾輪放大縮小 map.enableDoubleClickZoom();//啟用滑鼠雙擊放大，預設啟用(可不寫) map.enableKeyboard();//啟用鍵盤上下左右鍵移動地圖 } //地圖控制元件新增函式： function addMapControl() { //向地圖中新增縮放控制元件 var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE }); map.addControl(ctrl_nav); //向地圖中新增縮圖控制元件 var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 }); map.addControl(ctrl_ove); //向地圖中新增比例尺控制元件 var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }); map.addControl(ctrl_sca); } initMap();//建立和初始化地圖 </script> </html>
主要部分---注意事項
在頁面完成之後。把html檔案放到專案的...\bin\Debug資料夾下，和執行exe在同一個目錄下。
然後窗體執行的程式碼：
給窗體一個Load事件、、、這個是功能的主要點
private void Form1_Load(object sender, EventArgs e) { wbShow.ScriptErrorsSuppressed = true; string path = Path.Combine(Application.StartupPath, "HTMLMap.html"); wbShow.Navigate(path); }
下面是窗體的拖動和關閉程式碼
Point point = new Point(); private void label1_MouseDown(object sender, MouseEventArgs e) { point.X = e.X; point.Y = e.Y; } private void label1_MouseMove(object sender, MouseEventArgs e) { if (e.Button==MouseButtons.Left) { Point newPoint = MousePosition; newPoint.Offset(-point.X,-point.Y); Location = newPoint; } } private void btnExit_Click(object sender, EventArgs e) { Application.Exit(); }
到此結束：