MUI框架-13-使用百度地图 API(图文教程)

MUI框架-13-使用百度地图 API(图文教程)

一、申请百度地图权限

1.打开
百度地图开放平台:http://lbsyun.baidu.com/apiconsole/key

MUI框架-13-使用百度地图 API(图文教程)_第1张图片

2.【创建应用】>【填写必要信息】

MUI框架-13-使用百度地图 API(图文教程)_第2张图片

【提示】:
1.应用名称:随便填写。
2.应用类型:选择Android SDK
3. 启用服务:建议全选
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.包名获取方式>点击发行【云打包】:
MUI框架-13-使用百度地图 API(图文教程)_第3张图片

3.点击【提交】,就可以创建一个应用,

二、配置应用

1.配置应用,把 Android SDK AK 或者 IOS SDK AK 与MUI manifest.json 配置百度地图的 SDK 对应上

MUI框架-13-使用百度地图 API(图文教程)_第4张图片 MUI框架-13-使用百度地图 API(图文教程)_第5张图片

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
}	

四、参考案例

MUI框架-13-使用百度地图 API(图文教程)_第6张图片

完整代码:




    
        
        
        
        
        
        
        
        地图展示
    

    
        

签到打卡

五、更多链接:

地图已经配置、创建完成,需要使用一些工具/方法请参考

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 框架


- 本笔记不允许任何个人和组织转载

你可能感兴趣的:(#,MUI,框架)