百度单点移动功能

最新推荐文章于 2022-05-05 22:14:15 发布

善良的良小爷

最新推荐文章于 2022-05-05 22:14:15 发布

阅读量443

点赞数 1

分类专栏：个人笔记

本文链接：https://blog.csdn.net/wyl1401672169/article/details/79021643

版权

个人笔记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

好久没写CSDN博客，今天一口气写了两篇了，这是第三篇，根本停不下来的节奏，哈哈，上一篇文章让我们知道了如何调用百度地图来进行定位，这次来告诉大家如何调用百度单点移动功能。
所谓的单点移动功能，其实就是百度会根据你的出发点和终点，来给你推荐一条线路，并且会有图片在这条线路上奔跑，让你清晰的看到这条线路应该怎么行驶，还会有每个阶段的上一步下一步功能。

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/11/23
  Time: 16:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
     <meta name="viewport"
        content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">

    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=。。。。。。"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>

    <title>求救路线</title>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);

    /* var myP1 = new BMap.Point(116.380967,39.913285);    //起点
    var myP2 = new BMap.Point(116.424374,39.914668);    //终点 */
    var lng=${customer.lng};
    var lat=${customer.lat};
    /* var myP1 = new BMap.Point(114.510417,36.870056); */    //起点
    var myP1 = new BMap.Point(114.525124,36.863133);        //起点
    var myP2 = new BMap.Point(lng,lat);    //终点

    var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/car.png", new BMap.Size(52, 60), {    //小车图片
        //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);
                    },100);
                }
            }
            setTimeout(function(){
                resetMkPoint(5);
            },100)

        });
    }

    setTimeout(function(){
        run();
    },1500);
</script>

注解：第一步还是填写key；第二步，就需要你把客户的地址动态传入，然后终点如果是动态的，也需要动态传入，如果是死的，那就直接写死即可，这里需要注意的是，传入的值是经纬度，而不是名称，名称一个是不准确，另一个估计也很难搜索出来；第三步你就可以直接运行了。
有什么问题或者建议啥的，欢迎大家给我踊跃留言，谢谢大家。

善良的良小爷

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
5
评论
百度单点移动功能

好久没写CSDN博客，今天一口气写了两篇了，这是第三篇，根本停不下来的节奏，哈哈，上一篇文章让我们知道了如何调用百度地图来进行定位，这次来告诉大家如何调用百度单点移动功能。所谓的单点移动功能，其实就是百度会根据你的出发点和终点，来给你推荐一条线路，并且会有图片在这条线路上奔跑，让你清晰的看到这条线路应该怎么行驶，还会有每个阶段的上一步下一步功能。<%-- Created by Inte
复制链接

扫一扫