前言
練手的使用,邊學習邊做記錄,方便以后的人學習和使用,記錄方式按照列表的來
1、百度地圖的展示
2、百度地圖的定位
3、顯示POI點
準備步驟
注冊百度開發(fā)者的賬號,用來申請密鑰,從而使用百度的相關(guān)功能
我使用的是web端JavaScript API V2.0,按照官方提示的步驟,直至獲取密鑰
獲取的密鑰
百度地圖的展示
引入百度地圖API文件
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script>
將這段代碼添加到src目錄下的的index.html當中,切記,盡量放在<script src="cordova.js"></script>的前面,貌似和ionic的加載機制有關(guān)系。
然后在需要引用的html文件中添加
<div id="container" class="mapscss"></div>
其中mapscss指定的樣式為
.mapscss{
width: 100%;
height: 100%;
}
在ts文件中首先添加
首先需添加的代碼
在該ts當中引入了BMap
添加ionViewDidEnter方法,這個方法表示頁面進入完成的時候調(diào)用
代碼部分
展示這么多只是想表達大概長什么樣子,之后的代碼也是添加在這個地方,但是如果僅僅想要展示的話,只需要以下幾行代碼
let map = new BMap.Map('container', { enableMapClick: true });
let point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 18);
運行代碼
運行后
這樣就初步完成了百度地圖的展示功能