zoukankan      html  css  js  c++  java
  • 百度地图多定位点间移动

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>多定位点间移动</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&自己的ID"></script>
    </head>
    <body>
    <div>
    <input type='button' value='开始' onclick='run();' style="z-index: 999;" />
    <div style="1320px;height:640px;border:1px solid gray" id="container">

    </div>

    </div>


    </body>
    </html>
    <script type="text/javascript">





    var q={"state":"0","devices":[{"pt":"2016-12-21 12:00:29","lat":"22.68545","lng":"114.06649","s":"28.00","c":"284","stop":"0","stm":"0","g":"1"},{"pt":"2016-12-21 12:00:29","lat":"22.68545","lng":"114.06649","s":"28.00","c":"284","stop":"0","stm":"0","g":"1"},{"pt":"2016-12-21 12:00:49","lat":"22.68587","lng":"114.06444","s":"52.00","c":"278","stop":"0","stm":"0","g":"1"},{"pt":"2016-12-21 12:00:49","lat":"22.68587","lng":"114.06444","s":"52.00","c":"278","stop":"0","stm":"0","g":"1"},{"pt":"2016-12-21 12:01:09","lat":"22.68621","lng":"114.06131","s":"59.00","c":"276","stop":"0","stm":"0","g":"1"},{"pt":"2016-12-21 12:01:29","lat":"22.68657","lng":"114.05812","s":"62.00","c":"276","stop":"0","stm":"0","g":"1"},{"pt":"2016-12-21 12:01:49","lat":"22.68691","lng":"114.05495","s":"57.00","c":"275","stop":"0","stm":"0","g":"1"},{"pt":"2016-12-21 12:02:09","lat":"22.68715","lng":"114.05189","s":"55.00","c":"270","stop":"0","stm":"0","g":"1"},{"pt":"2016-12-21 12:02:29","lat":"22.68717","lng":"114.04851","s":"65.00","c":"268","stop":"0","stm":"0","g":"1"},{"pt":"2016-12-21 12:02:29","lat":"22.68717","lng":"114.04851","s":"65.00","c":"268","stop":"0","stm":"0","g":"1"},{"pt":"2016-12-21 12:02:49","lat":"22.68714","lng":"114.04504","s":"62.00","c":"270","stop":"0","stm":"0","g":"1"},{"pt":"2016-12-21 12:02:49","lat":"22.68714","lng":"114.04504","s":"62.00","c":"270","stop":"0","stm":"0","g":"1"}]}
    var devices= q.devices;
    var len=devices.length;


    var map = new BMap.Map("container");
    map.centerAndZoom(new BMap.Point(devices[0].lng,devices[0].lat), 15);

    var myP1 = new BMap.Point(devices[0].lng,devices[0].lat); //起点
    var myP2 = new BMap.Point(devices[len-1].lng,devices[len-1].lat); //终点
    var myIconmove = new BMap.Icon("http://dev.baidu.com/wiki/static/map/API/examples/images/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: false}}); //驾车实例
    //driving2.search(myP1, myP2); //显示一条公交线路

    //添加起标志
    //添加终标志
    var point = new BMap.Point(devices[0].lng,devices[0].lat);

    //添加起标志
    //添加终标志
    var myIcon = new BMap.Icon("http://api.map.baidu.com/img/dest_markers.png",new BMap.Size(28, 32), { offset: new BMap.Size(10, 25), imageOffset: new BMap.Size(0, 0) });
    var myIcon2 = new BMap.Icon("http://api.map.baidu.com/img/dest_markers.png",new BMap.Size(28, 32), { offset: new BMap.Size(-150, -205), imageOffset: new BMap.Size(0, -34) });

    var point2 = new BMap.Point(devices[len-1].lng,devices[len-1].lat);
    var marker = new BMap.Marker(point, {icon: myIcon}); // 创建标注
    var marker2 = new BMap.Marker(point2, {icon: myIcon2}); // 创建标注
    map.addOverlay(marker); // 将标注添加到地图中
    map.addOverlay(marker2);
    marker.setAnimation(BMAP_ANIMATION_DROP ); //跳动的动画
    marker2.setAnimation(BMAP_ANIMATION_DROP ); //跳动的动画

    var points = []; // 添加海量点数据
    for(var i=0;i<len;i++){
    var p = new BMap.Point(devices[i].lng, devices[i].lat);
    points.push(p);
    }

    var polyline = new BMap.Polyline(points, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5});
    map.addOverlay(polyline);

    function run(){
    var driving = new BMap.DrivingRoute(map); //驾车实例
    driving.search(point, point2);
    driving.setSearchCompleteCallback(function(){
    debugger;
    var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例,获得一系列点的数组
    pts =points;

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

    //alert(pts.toString());
    var carMk = new BMap.Marker(pts[0]);
    map.addOverlay(carMk);
    i=0;
    function resetMkPoint(i){
    carMk.setPosition(pts[i]);
    if(i < paths){
    setTimeout(function(){
    i++;
    resetMkPoint(i);
    },500);
    }else{map.removeOverlay(carMk);}
    }
    setTimeout(function(){
    resetMkPoint(0);
    },800)

    });
    }
    </script>


    也是从网上找的代码改的,具体改谁的不记得了。。
  • 相关阅读:
    一起talk C栗子吧(第九十回:C语言实例--使用管道进行进程间通信三)
    集群技术(三)MySQL集群深度解析
    ZOJ 3609 Modular Inverse(扩展欧几里德)
    8,16小感
    Dagger2----一个最简单的Dagger2依赖的实现
    android:模拟水波效果的自己定义View
    SQL Server 运行计划操作符具体解释(1)——断言(Assert)
    参数类型 (实体类层)eneity或pojo 常用参数类型
    参数类型 (@Controller层)
    参数类型 (@Service层) impl
  • 原文地址:https://www.cnblogs.com/doudouli/p/6635912.html
Copyright © 2011-2022 走看看