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

時間 2019-11-11

標籤 mui 框架使用百度地圖 api 圖文教程简体版

原文原文鏈接

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

後面有實例，轉載請註明出處javascript

1、申請百度地圖權限

1.打開
百度地圖開放平臺：http://lbsyun.baidu.com/apiconsole/keyphp

2.【建立應用】>【填寫必要信息】css

【提示】：
1.應用名稱：隨便填寫。
2.應用類型：選擇Android SDKhtml

啓用服務：建議全選
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.點擊【提交】，就能夠建立一個應用，html5

2、配置應用

1.配置應用，把 Android SDK AK 或者 IOS SDK AK 與MUI manifest.json 配置百度地圖的 SDK 對應上java

2.轉至 manifest.json 代碼視圖，下面若是已經存在就不用添加了android

（1）"permissions"節點下添加ios

"Maps": {
    "description": "管理地圖插件"

（2）在"plus"節點->"distribute"節點下添加git

"plugins": {
    "maps": {
        "baidu": {
            "appkey_ios": "以前上面建立ISO SDK  AK",
            "appkey_android": "以前上面建立Android SDK AK",
            "appkey": "",
            "description": "百度地圖"
        }
    }
}

3、在頁面上使用

至此配置完成，如下爲頁面使用方式。json

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
}

4、參考案例

完整代碼：

<!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>