使用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("网络异常");
                    }

                });

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

猜你喜欢

转载自blog.csdn.net/qq_39702364/article/details/79659440
今日推荐