首先需要在百度地圖開放平臺，創(chuàng)建應(yīng)用拿到appid，然后在hbuilder進(jìn)行如下配置：

hbuilder的manifest.json的配置如下：

permissions下添加如下代碼：

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

然后引入百度地圖的js：

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

根據(jù)傳入的起始位置和終點(diǎn)位置進(jìn)行導(dǎo)航

$.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(){// 設(shè)置目標(biāo)位置坐標(biāo)點(diǎn)和起始位置坐標(biāo)點(diǎn)var src = new plus.maps.Point(r.point.lng,r.point.lat); // 起始位置 var dst = new plus.maps.Point(lng,lat); //// 調(diào)用系統(tǒng)地圖顯示 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("網(wǎng)絡(luò)異常");}});},error:function(){alert("網(wǎng)絡(luò)異常");}});

備注：不是很了解maps模塊的可以去html5+Dcloud:
(http://www.dcloud.io/runtime.html)

總結(jié)

以上是生活随笔為你收集整理的使用hbuilder的maps模块调起百度地图导航的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。