C#调用百度地图API入门解决BMap未定义问题
生活随笔
收集整理的這篇文章主要介紹了
C#调用百度地图API入门解决BMap未定义问题
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
本文主要是最近幫助好友研究JavaScript的百度地圖API，同時顯示到C# Winform界面。同時遇到了BMap未定義的錯誤（BMap is not defined）及解決方法。以前寫過基于Android的百度地圖，其實原理都差不多，希望文章對你有所幫助吧！
一. C#顯示百度地圖
使用C# Winform顯示百度地圖主要包括兩個步驟：
1.調用百度地圖API，通過申請的密鑰AK訪問JavaScript版本地圖；
2.再在C#中webBrowser瀏覽器控件中訪問JS文件，顯示地圖到窗口。
百度官方文檔：http://developer.baidu.com/map/jsmobile.htm
百度申請密鑰：http://lbsyun.baidu.com/apiconsole/key
首先，申請密鑰如下圖所示：
密鑰申請成功，如下圖AK所示，通過它即可顯示JavaScript百度地圖。它包括Android端、瀏覽器端、服務器等應用。
百度地圖Hello World：http://developer.baidu.com/map/jsdemo-mobile.htm#a1_1
詳細代碼如下所示，需要填寫你的密鑰，本地新建一個a1_1.html即可。
<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}#golist {display: none;}@media (max-device-width: 780px){#golist{display: block !important;}}</style><script type="text/javascript" src="http://api.map.baidu.com/api?type=quick&ak=您的密鑰&v=1.0"></script><title>地圖官網展示效果</title> </head> <body><a id="golist" href="../demolist.htm">返回demo列表頁</a><div id="allmap"></div> </body> </html> <script type="text/javascript">// 百度地圖API功能var map = new BMap.Map("allmap"); // 創(chuàng)建Map實例var point = new BMap.Point(116.404, 39.915); // 創(chuàng)建點坐標map.centerAndZoom(point,15); // 初始化地圖,設置中心點坐標和地圖級別。map.addControl(new BMap.ZoomControl()); //添加地圖縮放控件 </script> 通過Chrome瀏覽器打開a1_1.html如下圖所示：
然后打開VS2012新建Winform項目，主要界面是通過WebBrowser。如下圖所示：
WebBrowser是一個.NET 控件類，在.NET Framework 2.0 版中新增。WebBrowser 類使用戶可以在窗體中導航網頁。
其中最常見的webBrowser1.Navigate(textBox1.Text.Trim());即可訪問URL各類網站。
這里也是通過該控件來顯示本地JavaScript網頁。核心代碼如下： using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms;//新添加命名空間 using System.Net; using System.IO; using System.Security.Permissions; //交互JSnamespace MapWinForms {[PermissionSet(SecurityAction.Demand, Name = "FullTrust")][System.Runtime.InteropServices.ComVisibleAttribute(true)]public partial class Form1 : Form{public Form1(){InitializeComponent();}private void button1_Click(object sender, EventArgs e){//本地文件 MapWinForms\bin\Debugstring url = Application.StartupPath + "\\a1_1.html";textBox1.Text = url;string file = "file:///E:\\WinFormBaiduMap\\a1_1.html";//屏蔽js相關錯誤webBrowser1.ScriptErrorsSuppressed = true; //導航顯示本地HTML文件webBrowser1.Navigate(url);}} } 運行結果如下圖所示：
下一篇文章會詳細介紹JavaScript一些百度地圖常用的函數(shù)即應用。
下面是推薦一些相關的優(yōu)秀博客：
C#調用百度地圖API經驗分享（四） 期待秋天的葉
基于百度地圖API的WinForm地圖 秦元培
C#百度地圖控件BMap.Net?秦元培
C# Form調用百度地圖api攻略及常見問題
百度地圖js小結 java_xiaobin
http://www.cnblogs.com/ljmin/archive/2012/07/27/2612413.html
二. 解決BMap未定義問題
在使用C# WebBrowser控件顯示百度地圖時，通常會報錯BMap未定義。
報錯：BMap.Map("container") BMap未定義?BMap is not defined
未解決方法：
網上看到很多資料，但是都沒有解決。包括：
1.需要將密鑰驗證的js一定要放在head標簽內；
2.C#忽略JS錯誤：webBrowser1.ScriptErrorsSuppressed = true;
3.在html文件head中添加如下代碼：
<script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>官方解決方法（沒有作用）：
http://bbs.lbsyun.baidu.com/forum.php?mod=viewthread&tid=4530
http://bbs.lbsyun.baidu.com/forum.php?mod=viewthread&tid=3062
http://bbs.lbsyun.baidu.com/forum.php?mod=viewthread&tid=88488
http://bbs.lbsyun.baidu.com/forum.php?mod=viewthread&page=1&tid=88543
http://blog.csdn.net/zhujianli1314/article/details/45696259
https://segmentfault.com/q/1010000004531211
HTTPS調用百度地圖API提示: BMap未定義
后來因為我使用WebBrowser控件顯示http://www.baidu.com都不能訪問，因為它都是微軟開發(fā)的軟件，我懷疑該控件是調用IE瀏覽器顯示的。
修復如下：工具=》Internet選項=》高級=》重置=》重啟電腦。同時可以在安全中，設置啟用加載腳本，混合等方法。
修復前確實我自己的IE瀏覽器不能使用了，對IE瀏覽器進行了修復后，C#程序確實能通過WebBrowser訪問網頁了。自己以為是這個原因，后來在加載JS時仍然報錯：BMap未定義。
最終解決方法：
該方法只保證能正確調用，但是具體設置密鑰錯誤的原因我也不清楚。
將head中調用密鑰的代碼修改為不需要密鑰的：
<script type="text/javascript"
? ? ? ? ?src="http://api.map.baidu.com/api?key=&v=1.1&services=true">
</script>
替代的代碼：
<script type="text/javascript"
? ? ? ? src="http://api.map.baidu.com/api?type=quick&ak=您的密鑰&v=1.0">
</script>
或者使用下面的代碼也是能在C#中正常顯示的：（AK為我的應用）
<script type="text/javascript"
? ? ? ? src="http://api.map.baidu.com/api?v=1.0&ak=ui7X2CSu3ITjojARL4tILi5W1i9gkDVS">
</script>
三. 備份一段JS百度地圖代碼
下面是一段代碼備份：<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ui7X2CSu3ITjojARL4tILi5W1i9gkDVS"></script><style type="text/css">body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}</style><title>百度地圖API測試</title> </head> <body><div id="allmap"></div> </body> </html> <script type="text/javascript"> var map = new BMap.Map("allmap"); // 創(chuàng)建Map實例var pointA = new BMap.Point(113.92983, 22.509397); // 創(chuàng)建點坐標 地址 蛇口沃爾瑪 var pointB = new BMap.Point(113.942129, 22.522642); //地址 海岸城map.centerAndZoom(pointA, 15);map.enableScrollWheelZoom(); //啟用滾輪放大縮小map.addControl(new BMap.NavigationControl());map.addControl(new BMap.ScaleControl());map.addControl(new BMap.OverviewMapControl());//map.setCurrentCity("北京"); // 設置當前城市信息/** 給地圖添加監(jiān)控 獲取當前點擊經緯度map.addEventListener("click", function(e){alert(e.point.lng + ", " + e.point.lat); });*/addMarker(pointA, "蛇口沃爾瑪", "地址：工業(yè)大道和東濱路交匯處<br/>電話：(0755)26816711"); // 創(chuàng)建標注1 addMarker(pointB, "海岸城購物中心", "地址：文心五路33號海岸城東座212號<br/>電話：(0755)86125888"); // 創(chuàng)建標注2 //開始測距 var polyline = new BMap.Polyline([pointA, pointB], { strokeColor: "orange", strokeWeight: 6, strokeOpacity: 0.5 }); //定義折線map.addOverlay(polyline); //添加折線到地圖上polyline.addEventListener("click", function () { //監(jiān)聽標注事件 alert('從蛇口沃爾瑪?shù)胶０冻琴徫镏行牡木嚯x是：' + (map.getDistance(pointA, pointB)).toFixed(2) + ' 米。'); //獲取兩點距離,保留小數(shù)點后兩位});//獲取駕車路線//var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true} });//driving.search(pointA, pointB);// 編寫自定義函數(shù),創(chuàng)建標注function addMarker(point, a, b) {var marker = new BMap.Marker(point);map.addOverlay(marker);//map.removeOverlay(marker); // 將標注從地圖中移除//marker.setAnimation(BMAP_ANIMATION_BOUNCE); // 跳動的動畫marker.addEventListener("click", function () { // 監(jiān)聽標注事件 var opts = { // 創(chuàng)建信息窗口width: 250, // 信息窗口寬度 height: 100, // 信息窗口高度 title: a // 信息窗口標題 }var infoWindow = new BMap.InfoWindow(b, opts); // 創(chuàng)建信息窗口對象 map.openInfoWindow(infoWindow, point); // 打開信息窗口 //alert("marker的位置是" + p.lng + "," + p.lat); });} </script> 運行結果如下圖所示：
參考：
http://blog.csdn.net/smartsmile2012/article/details/47754163
http://www.sufeinet.com/thread-7897-1-1.html
PS：最后希望文章對你有所幫助！這篇文章主要是一些在線筆記和入門介紹，非?；A的內容，詳細知識參考百度地圖官方文檔。 (By:Eastmount 2016-05-15 深夜2點半??http://blog.csdn.net/eastmount/?)
總結
以上是生活随笔為你收集整理的C#调用百度地图API入门解决BMap未定义问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [数据库] Navicat for Or
- 下一篇： 随笔：写给我深爱的球队