APP-4-百度地圖定位

時間 2019-11-19

原文原文鏈接

須要根據上一步完成百度地圖應用的測試，本文介紹Hbuilder經過MUI框架完成百度地圖的定位。css

1.代碼部分html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
        <script src="http://api.map.baidu.com/api?v=2.0&ak=PG4DBjFTHfawSwT10GLLn4YZhQCmGYGA"></script>
        <script src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
        <script src="../../js/mui.min.js"></script>
        
        <link href="../../css/mui.min.css"  rel="stylesheet"/>
        <link href="../../css/iconfont.css" rel="stylesheet"/>
        
        <title>地圖應用-地圖定位</title>
        
        <style type="text/css">
            body,
            html,
            #allmap {
                width: 100%;
                height: 95%;
                /*overflow: hidden;*/
                font-family: "微軟雅黑";
            }
        </style>
    </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 mui-body-font">地圖定位</h1>
        </header>
        <div id="allmap">
            地圖加載中。。。
        </div>  
        <div class="mui-content-padded">
            <button type="button" class="mui-btn mui-btn-block mui-btn-primary" onclick="getGeocode()">
                獲取定位信息
            </button>    
        </div>
    </body>
    <script type="text/javascript">    
        var exchange = {
            enableHighAccuracy: true,
            coordsType: 'bd09ll',
            timeout: 6000,
            maximumAge: 5000,
            provider: 'baidu'
        };
/*        // 擴展API加載完畢後調用onPlusReady回調函數
        document.addEventListener( "plusready", onPlusReady, false );
        
        // 擴展API加載完畢，如今能夠正常調用擴展API
        function onPlusReady() {
            // 獲取定位
        }*/
        
        getlocation();

        function getlocation(){
            // 獲取位置信息
            //plus.nativeUI.showWaiting();
            navigator.geolocation.getCurrentPosition(getinfo,exception,exchange);
        }
        
        function initMap(point){ 
            // 手機內置地圖
/*            var map=new plus.maps.Map("allmap");
            var point = new plus.maps.Point(116.331398,39.897445);*/
            // 百度地圖
            map = new BMap.Map("allmap");
            map.addControl(new BMap.NavigationControl());
            map.addControl(new BMap.ScaleControl());
            map.addControl(new BMap.OverviewMapControl());
            map.centerAndZoom(point, 18);
            // 地圖滾動大小
            map.enableScrollWheelZoom(true);
            // 建立標註
            var marker = new BMap.Marker(point);  
            // 將標註添加到地圖中
            map.addOverlay(marker);          
            // 跳動的動畫
            marker.setAnimation(BMAP_ANIMATION_BOUNCE); 
        }
        
        function getinfo(p){
            var curlat = p.coords.latitude;
            var curlon = p.coords.longitude;
            var curadd = p.addresses;
            //座標
            console.log(curlat + ',' + curlon);
            var gpsPoint = new BMap.Point(curlon, curlat);
            //座標轉換   
            BMap.Convertor.translate(gpsPoint, 0, initMap); 
        }
        
        function exception(e){
            alert(e.Message);
        }
        
        function getGeocode(){
            getlocation();
        }
    </script>
</html>