使用hbuilder的maps模組調起百度地圖導航
阿新 • • 發佈:2019-02-15
首先需要在百度地圖開放平臺,建立應用拿到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("網路異常");
}
});