APP-4-百度地图定位

flyfish 2022年03月09日编程设计 217 0

需要根据上一步完成百度地图应用的测试，本文介绍Hbuilder通过MUI框架完成百度地图的定位。

1.代码部分

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