Html+JavaScript+百度地图api:GPS功能单点运动

原创 2017年10月07日 16:21:11

在学习jQuery时,浏览到一个比较有意思的网页:jQuery插件库 http://www.jq22.com/,里面有很多封装好的插件库,然后,在地图插件里看到一个比较有意思的功能—路书,一个小车自己在地图上跑。

这里写图片描述

百度一下这个路书,感觉发现了 百度地图javascript api 这个新世界,有许多现成的示例可以参考
这里写图片描述

这里,主要是参考百度地图示例demo中的GPS功能-单个标注点的轨迹运动
这里写图片描述

功能实现简单来说就是,在百度地图上,根据起始点坐标,创建出一条路线,之后设置一个icon在该线上进行运动。

首先,查看源码后,可以看到该方法主要用到两个关键的类库Map和DrivingRoute,从百度地图中的JavaScript API 类参考可以找到,其中有关于两类库的详细说明。

这里写图片描述

这里写图片描述

然后呢,源码只是固定的起始点坐标,把坐标改成可以在地图上选取的更有意思一点。
实现的功能是在地图上选取起始点,再进行单点运动。

具体的过程是:

  1. 设置鼠标监听事件,左键点击地图,获取到起点的经纬度坐标,右击后去终点的坐标,并将值赋到输入框中
  2. 之后在按钮点击事件触发后,从输入框中取出起始点的经纬度坐标,使用new BMap.point()方法创建起始点;之后有了起始点后,
  3. 使用new BMap.DrivingRoute(map)创建出驾车路线,再使用driving.search(myP1, myP2)方法进行路线搜索。
  4. 使用driving.getResults().getPlan(0).getRoute(0).getPath();方法获取一系列的驾车路线点,之后根据setTime方法刷新Mario的位置,就达到了该功能的效果。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" 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>
<!--<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=dAGNFXFqNyptRga4zbXURNV93Q6ldbA7"></script>-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
         <title>出发吧!Mario</title>
</head>
<body>
    <div id="setlocation">
       <p>左击选择起点,右击选择终点</p>
        起点:<input id="start" type="text" value="116.715375, 39.515095"/>    <!--value="116.715375, 39.515095"-->
        终点:<input id="end" type="text" value="115.402794, 27.738408"/>       <!--value="115.402794, 27.738408"-->
        <button id="btnDri" onclick="drive()">开始运动</button>
    </div>

    <div id="allmap" ></div>
</body>
</html>

<script type="text/javascript">



    //百度地图api功能,GPS功能-单点沿直线运动
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(116.403436, 39.923692), 10);  //初始坐标点设置为北京故宫中,缩放层级为12
    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

    //点选起始点的坐标

    function showInfo(e) {
        document.getElementById("start").value = e.point.lng + "," + e.point.lat;

        alert("起点的经纬度为:" + e.point.lng + "," + e.point.lat);
    }
    map.addEventListener("click", showInfo);

    function showInfo2(e2) {
        document.getElementById("end").value = e2.point.lng + "," + e2.point.lat;

        alert("终点的经纬度为:"+e2.point.lng + "," + e2.point.lat);
    }
    map.addEventListener("rightclick",showInfo2);  

    function drive() {

    //从输入框中获取起始点的坐标
        var alng, alat, blng, blat;

        alng = document.getElementById("start").value.split(",")[0];
        alat = document.getElementById("start").value.split(",")[1];
        blng = document.getElementById("end").value.split(",")[0];
        blat = document.getElementById("end").value.split(",")[1];

  //     alert(alng + "\t" + alat + "\n" + blng + "\t" + blat);


    //var myP1 = new BMap.Point(116.715375, 39.515095);  //起点设置为,河北廊坊站
    //var myP2 = new BMap.Point(115.402794, 27.738408);  //终点设置为,江西新干站
    //116.715375, 39.515095  115.402794, 27.738408
    var myP1 = new BMap.Point(alng,alat);  
    var myP2 = new BMap.Point(blng,blat);  

    var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/Mario.png",

        new BMap.Size(32, 70),
        {
            //单点标记图
            imageOffset: new BMap.Size(0, 0)  //图片偏移量,以对准标记点中心
        });
    var driving2 = new BMap.DrivingRoute(map,
        {
            renderOptions: { //结果呈现设置
                map: map,
                autoViewport: true,  //检索结束后自动调整地图视野
                enableDragging: true   //起终点可进行拖拽 
            },
            policy: BMAP_DRIVING_POLICY_LEAST_TIME //驾车方案的策略配置,最少时间


        });    //创建一个驾车导航实例

    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 marioMK = new BMap.Marker(pts[0], { icon: myIcon });
            map.addOverlay(marioMK);
            i = 0;

            function restMKPoint(i) {
                marioMK.setPosition(pts[i]);
                if (i < paths) {
                    setTimeout(function () {
                        i++;
                        restMKPoint(i);
                    },50);
                }
            }
            setTimeout(function () {
                restMKPoint(5);
            }, 50)

        });
    }
    setTimeout(function () {
        run();

    },100);
    }
</script>

效果截图:

这里写图片描述

这里写图片描述

该路线百度地图中是搜索的驾车路线中的最短时间路线。

百度地图API——单点沿线运动(js)

感觉此demo比较好玩,简单学习了下!PS:js不是很熟悉,同步学习ing。 body, html,#allmap {width: 100%;height: 100%;ov...

python调用百度地图API 实现单点沿线轨迹运动

百度地图API 可以做很多好玩的事情,自己闲来无事,先是照着一些资料做了热力图,然后借助pyqt5做了一个简单的界面,实现gps单点沿线(行车)的轨迹。 先上程序界面和效果图: 过...

Flex中调用本地html实现百度地图API Javascript版的一些常用地图功能

功能:公交、驾车和地点搜索框查询,右键菜单在地图上随意选择起终点,选择最短距离或最少时间查询驾车路线,并带有路书功能,还有距离测量功能。不细讲了,见代码吧。 ...

html5获取地理位置 利用百度地图JavaScript API标注

html5获取地理位置 利用百度地图JavaScript API标注。HTML5 Geolocation API 用于获得用户的地理位置。使用时需要用户同意,否则用户位置信息是不可用的。Interne...

关于Html5引用百度地图Api的小功能

本文主要是笔者自己遇到的问题的解决方法百度地图Api中的控件 Control:控件的抽象基类,所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。 NavigationControl:地图平移...
  • cqf1997
  • cqf1997
  • 2017年07月11日 14:54
  • 199

利用百度地图API实现gps坐标到百度坐标的批量坐标转换(如1000个点)

1.改写百度提供的批量转化js,实现一次请求100个坐标点 2.利用递归回调控制坐标转换的回传顺序,保证先请求的一组坐标(一组100个)先到达 首先我们来看一下百度地图api的demo里有两个坐标...

百度地图API 重新生成点聚合的功能

百度点聚合用来解决加载大量点要素到地图上产生覆盖现象的问题,并提高性能。 http://api.map.baidu.com/library/MarkerClusterer/1.2/docs/symb...

HTML5地理定位,百度地图API,知识点熟悉

判断浏览器的兼容问题: IE9+支持地理定位,FF Chrome新版支持地理定位  if (navigator.geolocation) {        alert('支持地理...

HTML5地理定位,百度地图API,知识点熟悉

判断浏览器的兼容问题: IE9+支持地理定位,FF Chrome新版支持地理定位 if (navigator.geolocation) {        alert('支持地理定...

go通过代理访问百度地图api实现GPS角坐标转换

package crontab import ( . "domain/model" "encoding/json" "infrastructure/log" "io/ioutil" "ne...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Html+JavaScript+百度地图api:GPS功能单点运动
举报原因:
原因补充:

(最多只允许输入30个字)