!DOCTYPE html html head meta http-equiv="Content-Type" cont

时间：2021-11-08 06:56:06

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta content="initial-scale=1.0, user-scalable=no" />

    <style type="text/css">

    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}

    </style>

    

    <title>参考线路</title>

</head>

<body>

    <div></div>

</body>

</html>

<script src="http://www.mamicode.com/lib/base/base.js"></script>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4d06aa5b2c816cc52a1a9cd008808c68"></script>

<script type="text/javascript">

var lon=getQueryString(‘lon‘) //方针位置

var lat=getQueryString(‘lat‘)

var mylon=getQueryString(‘mylon‘)//本身的位置

var mylat=getQueryString(‘mylat‘)


    // 百度舆图API成果


    //添加舆图类型控件

var map = new BMap.Map("allmap");

map.centerAndZoom(new BMap.Point(lon,lat), 15);

 

//增加比例尺

var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺

    var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件

var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角

 

map.addControl(top_left_control); //增加比例尺

        map.addControl(top_left_navigation);

        map.addControl(top_right_navigation);


    var myP1 = new BMap.Point(lon,lat); //起点

    var myP2 = new BMap.Point(mylon,mylat); //终点

    var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/Mario.png", new BMap.Size(32, 70), { //小车图片

        //offset: new BMap.Size(0, -5), //相当于CSS精灵

        imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心瞄准坐标点。

     });

    var driving2 = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}}); //驾车实例

    driving2.search(myP1, myP2); //显示一条公交线路


    window.run = function (){

        var driving = new BMap.DrivingRoute(map); //驾车实例

        driving.search(myP1, myP2);

        driving.setSearchCompleteCallback(function(){

            var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例，，获得一系列点的数组

            var paths = pts.length; //获得有几个点


            var carMk = new BMap.Marker(pts[0],{icon:myIcon});

            map.addOverlay(carMk);

            i=0;

            function resetMkPoint(i){

                carMk.setPosition(pts[i]);

                if(i < paths){

                    setTimeout(function(){

                        i++;

                        resetMkPoint(i);

                    },60);

                }

            }

            setTimeout(function(){

                resetMkPoint(5);

            },100)


        });

    }


    setTimeout(function(){

        run();

    },1500);

相关文章