MUI框架-13-使用百度地圖 API（圖文教程）
阿新 • • 發佈：2018-11-07
MUI框架-13-使用百度地圖 API（圖文教程）
後面有例項，轉載請註明出處
一、申請百度地圖許可權
1.開啟
百度地圖開放平臺：http://lbsyun.baidu.com/apiconsole/key
2.【建立應用】>【填寫必要資訊】
【提示】：
1.應用名稱：隨便填寫。
2.應用型別：選擇Android SDK
- 啟用服務：建議全選
4.釋出版SHA1：BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58（DCloud公用證書SHA1）
5.開發版SHA1：BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58（DCloud公用證書SHA1）
6.包名獲取方式>點擊發行【雲打包】：
3.點選【提交】，就可以建立一個應用，
二、配置應用
1.配置應用，把 Android SDK AK 或者 IOS SDK AK 與MUI manifest.json 配置百度地圖的 SDK 對應上
2.轉至 manifest.json 程式碼檢視，下面如果已經存在就不用添加了
（1）"permissions"節點下新增
"Maps": {
"description": "管理地圖外掛"
（2）在"plus"節點->"distribute"節點下新增
"plugins": { "maps": { "baidu": { "appkey_ios": "之前上面建立ISO SDK AK", "appkey_android": "之前上面建立Android SDK AK", "appkey": "", "description": "百度地圖" } } }
三、在頁面上使用
至此配置完成，以下為頁面使用方式。
1.為了確保地圖能正確顯示，需等待DOM載入完成再初始化百度地圖
2.地圖div需指明高度與寬度
var em = null, map = null; document.addEventListener("DOMContentLoaded", function() { em = document.getElementById("allmap");//allmap為頁面放地圖div的id plusReady(); }, false); function plusReady() { //確保DOM解析完成 if(!em || !window.plus || map) { return; } map = new plus.maps.Map("allmap");//allmap為頁面放地圖div的id }
四、參考案例
完整程式碼：
<!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" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../../css/mui.min.css" rel="stylesheet" />
<script src="../../js/mui.min.js"></script>
<style type="text/css">
body,
html,
#allmap {
width: 100%;
height: 80%;
overflow: hidden;
font-family: "微軟雅黑";
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=換成自己的百度地圖提供的 ak"></script>
<title>地圖展示</title>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">簽到打卡</h1>
</header>
<div id="allmap"></div>
<input type="text" id="address" />
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("allmap");
//初始化地圖 預設載入北京天安門
var point = new BMap.Point(116.331398, 39.897445);
map.centerAndZoom(point, 16); //初始化地圖，point為中心點，縮放級別為16
//判斷手機瀏覽器是否支援定位
if(navigator.geolocation) {
var geolocation = new BMap.Geolocation(); //建立定位例項
geolocation.getCurrentPosition(showLocation, {
enableHighAccuracy: true
}); //enableHighAccuracy 要求瀏覽器獲取最佳結果
} else {
map.addControl(new BMap.GeolocationControl()); //新增定位控制元件 支援定位
}
var gc = new BMap.Geocoder();//將座標轉換成地址
//處理定位後的資訊
function showLocation(r) {
if(this.getStatus() == BMAP_STATUS_SUCCESS) { //定位成功
//新建中心點 並將地圖中心移動過去
var centerPoint = new BMap.Point(r.longitude, r.latitude);
map.panTo(centerPoint);
map.setCenter(centerPoint);
gc.getLocation(centerPoint,function(rs){
var addComp = rs.addressComponents;
var mapAddress = addComp.province + addComp.city + addComp.district
+ addComp.street + addComp.streetNumber;
//mui.alert(mapAddress);
var address = document.getElementById('address');
address.value=mapAddress;
address.readOnly='readonly';
});
//新建標註
var mk = new BMap.Marker(centerPoint);
mk.disableDragging(); // 不可拖拽
map.addOverlay(mk);
} else {
mui.alert('failed' + this.getStatus()); //定位失敗
}
}
</script>
五、更多連結：
地圖已經配置、建立完成，需要使用一些工具/方法請參考
1.Dcloud API Reference：http://www.html5plus.org/doc/zh_cn/maps.html
2.百度地圖官方使用文件：http://lbsyun.baidu.com/index.php?title=androidsdk/guide/key
我的文章：MUI 框架
- 本筆記不允許任何個人和組織轉載