MUI框架-13-使用百度地图 API（图文教程）

后面有实例，转载请注明出处

一、申请百度地图权限

1.打开

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

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.包名获取方式>点击发行【云打包】：

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

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