1. 程式人生 > >使用hbuilder的maps模組調起百度地圖導航

使用hbuilder的maps模組調起百度地圖導航

首先需要在百度地圖開放平臺,建立應用拿到appid,然後在hbuilder進行如下配置:

這裡寫圖片描述
這裡寫圖片描述
這裡寫圖片描述

hbuilder的manifest.json的配置如下:

permissions下新增如下程式碼:

"Maps": {
            "description": "地圖"
        }

然後引入百度地圖的js:

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak='這裡是訪問應用的ak'"></script>

根據傳入的起始位置和終點位置進行導航

                $.ajax({                
                    type: "GET",
                    timeout:50000,               
                    url: 'http://api.map.baidu.com/geocoder/v2/?address='+terminal+'&output=json&coord_type=wgs84&ak=31hswa0Y8ZprG7ztIFTAuPon5x4pqBb3&callback=showLocation'
, dataType:"jsonp", async: false, success: function(data){ console.log(JSON.stringify(data)); var lat = data['result']['location']['lat']; var lng = data['result']['location'
]['lng']; $.ajax({ type: "GET", timeout:50000, url: 'http://api.map.baidu.com/geocoder/v2/?location='+lat+','+lng+'&output=json&coord_type=wgs84&ak=31hswa0Y8ZprG7ztIFTAuPon5x4pqBb3&callback=showLocation', dataType:"jsonp", async: false, success: function(data){ // console.dir(data['result']['addressComponent']['city']); city = data['result']['addressComponent']['city']; // alert(city); if(terminal != ''){ var geolocation = new BMap.Geolocation(); var gc = new BMap.Geocoder(); geolocation.getCurrentPosition(function(r){ if(this.getStatus() == BMAP_STATUS_SUCCESS){ // alert('您的位置:'+r.point.lng+','+r.point.lat); var pt = r.point; gc.getLocation(pt, function(rs){ var addComp = rs.addressComponents; // location.href = 'http://api.map.baidu.com/direction?origin=latlng:'+r.point.lat+','+r.point.lng+'|name:我的位置&destination=latlng:'+lat+','+lng+'|name:'+terminal+'&mode=driving&origin_region='+addComp.city+'&destination_region='+city+'&output=html&src=yourCompanyName|yourAppName'; function plusReady(){ // 設定目標位置座標點和起始位置座標點 var src = new plus.maps.Point(r.point.lng,r.point.lat); // 起始位置 var dst = new plus.maps.Point(lng,lat); // // 呼叫系統地圖顯示 plus.maps.openSysMap( dst, terminal, src ); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } }); } else { alert('failed'+this.getStatus()); } },{enableHighAccuracy: true}) } }, error:function(){ alert("網路異常"); } }); }, error:function(){ alert("網路異常"); } });