手机应用 加载显示百度地图 并根据起点和终点显示行车...

zhangbingshan

在手机端加载显示百度地图的步骤
1、在百度开发者后台创建一个浏览器端的应用，获得ak，申请地址：http://lbsyun.baidu.com/apiconsole/key；
2、添加显示map的div：<div xid="baiduMap" style="height:250px;width:100%;"/>；
3、js实现加载行车路线：// 显示行车路线
        Model.prototype.showMap = function(pOrigin, pDestination) { // 传入参数：起点和终点
                var self = this;
                var mID = this.getIDByXID("baiduMap");

                window._baiduInit = function() {
                        self._map = new BMap.Map(mID);

                        var mOriginSearch = new BMap.LocalSearch(self._map);
                        mOriginSearch.enableAutoViewport(); // 允许自动调节窗体大小

                        var start = pOrigin;
                        var end = pDestination;
                        // 三种驾车策略：最少时间，最短距离，避开高速
                        var routePolicy = [ BMAP_DRIVING_POLICY_LEAST_TIME, BMAP_DRIVING_POLICY_LEAST_DISTANCE, BMAP_DRIVING_POLICY_AVOID_HIGHWAYS ];
                        self._map.clearOverlays();
                        self.searchDrivingRoute(start, end, routePolicy[0], self._map);
                };

                require([ 'http://api.map.baidu.com/api?v=1.4&ak=你自己申请的ak&callback=_baiduInit' ], function() {
                        if (!(window.BMap && window.BMap.apiLoad)) {
                                window._baiduInit();
                        }
                });
        };

        // 显示行车路线方法实现
        Model.prototype.searchDrivingRoute = function(start, end, route, map) {
                var driving = new BMap.DrivingRoute(map, {
                        renderOptions : {
                                map : map,
                                autoViewport : true
                        },
                        policy : route
                });
                driving.search(start, end);
        };

gbk18030

谢谢大大的代码，小弟用的是3.6版本，有一问题：

传入参数：起点和终点为何种形式？

大大可否给个使用代码？

先谢谢

zhangbingshan

gbk18030 发表于 2016-12-21 18:18
谢谢大大的代码，小弟用的是3.6版本，有一问题：

传入参数：起点和终点为何种形式？

传入文字位置参数，这就是调用的代码，在需要现实的地方调用showMap方法就行。

gbk18030

zhangbingshan 发表于 2016-12-22 15:36
传入文字位置参数，这就是调用的代码，在需要现实的地方调用showMap方法就行。 ...

谢谢大大，

小弟不知为何在 window._baiduInit() 外，用 var pOrigin = new BMap.Point(116.404, 39.915); 系统报错。
Model.prototype.button1Click = function(event){
        var self = this;
        var mID = this.getIDByXID("baiduMap");

        var pOrigin = new BMap.Point(116.404,39.915); <===== 系统报错
        var pDestination = new BMap.Point(125.352396,43.869804);

        showMap(pOrigin, pDestination);

目前小弟是用
        var slon= 116.404;
        var slat= 39.915;
        var dlon = .....;
然后在 window._baiduInit()内，创建 pOrigin, pDestination

大大对此有何建议？ 先谢谢。

zhangbingshan

gbk18030 发表于 2016-12-23 12:20
谢谢大大，

小弟不知为何在 window._baiduInit() 外，用 var pOrigin = new BMap.Point(116.404, 39.915 ...

不应该放在window._baiduInit() 外，先得调百度的接口初始化map对象，成功之后才能初始化地图，你作为参数传入。为什么要放在外边？

gbk18030

zhangbingshan 发表于 2016-12-23 12:35
不应该放在window._baiduInit() 外，先得调百度的接口初始化map对象，成功之后才能初始化地图，你作为参 ...

谢谢大大，

如果从硬件获得经纬度资料，所导入的资料是csv格式，本想用大大的方式调用。。。。

大大，有无关路书的代码可分享吗？

再次谢谢。