當(dāng)前位置：首頁(yè) > 编程语言 > C# >内容正文

C#

C#调用百度地图API入门解决BMap未定义问题

發(fā)布時(shí)間：2024/5/28 C# 64 豆豆

生活随笔收集整理的這篇文章主要介紹了 C#调用百度地图API入门解决BMap未定义问题小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

本文主要是最近幫助好友研究JavaScript的百度地圖API，同時(shí)顯示到C# Winform界面。同時(shí)遇到了BMap未定義的錯(cuò)誤（BMap is not defined）及解決方法。以前寫(xiě)過(guò)基于Android的百度地圖，其實(shí)原理都差不多，希望文章對(duì)你有所幫助吧！

一. C#顯示百度地圖

使用C# Winform顯示百度地圖主要包括兩個(gè)步驟：
1.調(diào)用百度地圖API，通過(guò)申請(qǐng)的密鑰AK訪問(wèn)JavaScript版本地圖；
2.再在C#中webBrowser瀏覽器控件中訪問(wèn)JS文件，顯示地圖到窗口。

百度官方文檔：http://developer.baidu.com/map/jsmobile.htm
百度申請(qǐng)密鑰：http://lbsyun.baidu.com/apiconsole/key

首先，申請(qǐng)密鑰如下圖所示：

密鑰申請(qǐng)成功，如下圖AK所示，通過(guò)它即可顯示JavaScript百度地圖。它包括Android端、瀏覽器端、服務(wù)器等應(yīng)用。

百度地圖Hello World：http://developer.baidu.com/map/jsdemo-mobile.htm#a1_1
詳細(xì)代碼如下所示，需要填寫(xiě)你的密鑰，本地新建一個(gè)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>地圖官網(wǎng)展示效果</title> </head> <body><a id="golist" href="../demolist.htm">返回demo列表頁(yè)</a><div id="allmap"></div> </body> </html> <script type="text/javascript">// 百度地圖API功能var map = new BMap.Map("allmap"); // 創(chuàng)建Map實(shí)例var point = new BMap.Point(116.404, 39.915); // 創(chuàng)建點(diǎn)坐標(biāo)map.centerAndZoom(point,15); // 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別。map.addControl(new BMap.ZoomControl()); //添加地圖縮放控件 </script> 通過(guò)Chrome瀏覽器打開(kāi)a1_1.html如下圖所示：

然后打開(kāi)VS2012新建Winform項(xiàng)目，主要界面是通過(guò)WebBrowser。如下圖所示：

WebBrowser是一個(gè).NET 控件類(lèi)，在.NET Framework 2.0 版中新增。WebBrowser 類(lèi)使用戶(hù)可以在窗體中導(dǎo)航網(wǎng)頁(yè)。
其中最常見(jiàn)的webBrowser1.Navigate(textBox1.Text.Trim());即可訪問(wèn)URL各類(lèi)網(wǎng)站。
這里也是通過(guò)該控件來(lái)顯示本地JavaScript網(wǎng)頁(yè)。核心代碼如下： 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相關(guān)錯(cuò)誤webBrowser1.ScriptErrorsSuppressed = true; //導(dǎo)航顯示本地HTML文件webBrowser1.Navigate(url);}} } 運(yùn)行結(jié)果如下圖所示：

下一篇文章會(huì)詳細(xì)介紹JavaScript一些百度地圖常用的函數(shù)即應(yīng)用。
下面是推薦一些相關(guān)的優(yōu)秀博客：
C#調(diào)用百度地圖API經(jīng)驗(yàn)分享（四）期待秋天的葉
基于百度地圖API的WinForm地圖秦元培
C#百度地圖控件BMap.Net?秦元培
C# Form調(diào)用百度地圖api攻略及常見(jiàn)問(wèn)題
百度地圖js小結(jié) java_xiaobin
http://www.cnblogs.com/ljmin/archive/2012/07/27/2612413.html

二. 解決BMap未定義問(wèn)題

在使用C# WebBrowser控件顯示百度地圖時(shí)，通常會(huì)報(bào)錯(cuò)BMap未定義。
報(bào)錯(cuò)：BMap.Map("container") BMap未定義?BMap is not defined

未解決方法：
網(wǎng)上看到很多資料，但是都沒(méi)有解決。包括：
1.需要將密鑰驗(yàn)證的js一定要放在head標(biāo)簽內(nèi)；
2.C#忽略JS錯(cuò)誤：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>官方解決方法（沒(méi)有作用）：
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調(diào)用百度地圖API提示: BMap未定義

后來(lái)因?yàn)槲沂褂肳ebBrowser控件顯示http://www.baidu.com都不能訪問(wèn)，因?yàn)樗际俏④涢_(kāi)發(fā)的軟件，我懷疑該控件是調(diào)用IE瀏覽器顯示的。
修復(fù)如下：工具=》Internet選項(xiàng)=》高級(jí)=》重置=》重啟電腦。同時(shí)可以在安全中，設(shè)置啟用加載腳本，混合等方法。

修復(fù)前確實(shí)我自己的IE瀏覽器不能使用了，對(duì)IE瀏覽器進(jìn)行了修復(fù)后，C#程序確實(shí)能通過(guò)WebBrowser訪問(wèn)網(wǎng)頁(yè)了。自己以為是這個(gè)原因，后來(lái)在加載JS時(shí)仍然報(bào)錯(cuò)：BMap未定義。

最終解決方法：
該方法只保證能正確調(diào)用，但是具體設(shè)置密鑰錯(cuò)誤的原因我也不清楚。
將head中調(diào)用密鑰的代碼修改為不需要密鑰的：
<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為我的應(yīng)用）
<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測(cè)試</title> </head> <body><div id="allmap"></div> </body> </html> <script type="text/javascript"> var map = new BMap.Map("allmap"); // 創(chuàng)建Map實(shí)例var pointA = new BMap.Point(113.92983, 22.509397); // 創(chuàng)建點(diǎn)坐標(biāo) 地址蛇口沃爾瑪 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("北京"); // 設(shè)置當(dāng)前城市信息/** 給地圖添加監(jiān)控獲取當(dāng)前點(diǎn)擊經(jīng)緯度map.addEventListener("click", function(e){alert(e.point.lng + ", " + e.point.lat); });*/addMarker(pointA, "蛇口沃爾瑪", "地址：工業(yè)大道和東濱路交匯處<br/>電話(huà)：(0755)26816711"); // 創(chuàng)建標(biāo)注1 addMarker(pointB, "海岸城購(gòu)物中心", "地址：文心五路33號(hào)海岸城東座212號(hào)<br/>電話(huà)：(0755)86125888"); // 創(chuàng)建標(biāo)注2 //開(kāi)始測(cè)距 var polyline = new BMap.Polyline([pointA, pointB], { strokeColor: "orange", strokeWeight: 6, strokeOpacity: 0.5 }); //定義折線map.addOverlay(polyline); //添加折線到地圖上polyline.addEventListener("click", function () { //監(jiān)聽(tīng)標(biāo)注事件 alert('從蛇口沃爾瑪?shù)胶０冻琴?gòu)物中心的距離是：' + (map.getDistance(pointA, pointB)).toFixed(2) + ' 米。'); //獲取兩點(diǎn)距離,保留小數(shù)點(diǎn)后兩位});//獲取駕車(chē)路線//var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true} });//driving.search(pointA, pointB);// 編寫(xiě)自定義函數(shù),創(chuàng)建標(biāo)注function addMarker(point, a, b) {var marker = new BMap.Marker(point);map.addOverlay(marker);//map.removeOverlay(marker); // 將標(biāo)注從地圖中移除//marker.setAnimation(BMAP_ANIMATION_BOUNCE); // 跳動(dòng)的動(dòng)畫(huà)marker.addEventListener("click", function () { // 監(jiān)聽(tīng)標(biāo)注事件 var opts = { // 創(chuàng)建信息窗口width: 250, // 信息窗口寬度 height: 100, // 信息窗口高度 title: a // 信息窗口標(biāo)題 }var infoWindow = new BMap.InfoWindow(b, opts); // 創(chuàng)建信息窗口對(duì)象 map.openInfoWindow(infoWindow, point); // 打開(kāi)信息窗口 //alert("marker的位置是" + p.lng + "," + p.lat); });} </script> 運(yùn)行結(jié)果如下圖所示：

參考：
http://blog.csdn.net/smartsmile2012/article/details/47754163
http://www.sufeinet.com/thread-7897-1-1.html

PS：最后希望文章對(duì)你有所幫助！這篇文章主要是一些在線筆記和入門(mén)介紹，非常基礎(chǔ)的內(nèi)容，詳細(xì)知識(shí)參考百度地圖官方文檔。 (By:Eastmount 2016-05-15 深夜2點(diǎn)半??http://blog.csdn.net/eastmount/?)

總結(jié)

以上是生活随笔為你收集整理的C#调用百度地图API入门解决BMap未定义问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： [数据库] Navicat for Or
下一篇：关于《用C#编写ActiveX控件》的几