`
CshBBrain
  • 浏览: 650278 次
  • 性别: Icon_minigender_1
  • 来自: 成都
博客专栏
B7d9bf34-126e-301f-819e-81f2615b5a2a
开源WebSocket服务...
浏览量:144942
Group-logo
HTML5移动开发
浏览量:137888
社区版块
存档分类
最新评论

百度地图API - 行车路线 轨迹

 
阅读更多

转自:http://hi.baidu.com/hackerbase/item/0a54b12d0005690e72863e3c

 

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>驾车途经点</title>  
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>  
</head>  
<body>  
<p><input type='button' value='开始' onclick='run();' /></p>  
<div style="width:820px;height:500px;border:1px solid gray" id="container"></div>  
<script type="text/javascript">  
    var map = new BMap.Map("container");  
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);  
    map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件  
    map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件  
    map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件  
      
    var myP1 = new BMap.Point(106.521436,29.532288);    //起点-重庆  
    var myP2 = new BMap.Point(108.983569,34.285675);    //终点-西安  
    var myP3 = new BMap.Point(116.404449,39.920423);    //终点-北京  
      
    window.run = function (){  
        map.clearOverlays();                        //清除地图上所有的覆盖物  
        var driving = new BMap.DrivingRoute(map);    //创建驾车实例  
        driving.search(myP1, myP2);                 //第一个驾车搜索  
        driving.search(myP2, myP3);                 //第二个驾车搜索  
        driving.setSearchCompleteCallback(function(){  
            var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例,获得一系列点的数组  
      
            var polyline = new BMap.Polyline(pts);       
            map.addOverlay(polyline);  
              
            var m1 = new BMap.Marker(myP1);         //创建3个marker  
            var m2 = new BMap.Marker(myP2);  
            var m3 = new BMap.Marker(myP3);  
            map.addOverlay(m1);  
            map.addOverlay(m2);  
            map.addOverlay(m3);  
              
            var lab1 = new BMap.Label("起点",{position:myP1});        //创建3个label  
            var lab2 = new BMap.Label("途径点",{position:myP2});  
            var lab3 = new BMap.Label("终点",{position:myP3});     
            map.addOverlay(lab1);  
            map.addOverlay(lab2);  
            map.addOverlay(lab3);  
              
            setTimeout(function(){  
                map.setViewport([myP1,myP2,myP3]);          //调整到最佳视野  
            },1000);  
              
        });  
    }  
</script>  
</body>  
</html>  

分享到:
评论

相关推荐

    百度地图API 驾车路线的自定义绘制

    本文将深入探讨“百度地图API 驾车路线的自定义绘制”这一主题,帮助开发者理解如何利用百度地图API创建个性化且实用的驾车导航路线。 首先,我们需要了解百度地图API的基础。百度地图API是一个JavaScript接口,它...

    百度地图根据起始点经纬度坐标确认最佳路线规划

    5. **服务接口**:对于开发者来说,百度地图提供了API接口,允许外部应用集成路线规划功能。开发者可以使用这些接口,结合起始点和终点的经纬度,获取规划好的路线信息。 6. **结果展示与交互**:最后,百度地图将...

    百度地图划线,轨迹

    百度地图API提供了轨迹回放、轨迹优化等高级功能,帮助开发者更好地理解和利用这些数据。 再次,**划线**功能则是在地图上绘制路径或区域,通常用于指示路线、设定边界或者展示特定区域。百度地图JavaScript API...

    自制Android百度地图

    同时,开发者通过调用百度地图API中的定位接口,能够实时更新并显示用户的移动轨迹。 二、经纬度搜索定位 基于经纬度的搜索定位允许用户输入特定的经纬度坐标,地图会自动跳转到对应的位置。这在需要精确导航或者...

    百度地图语音导航demo

    【标题】"百度地图语音导航demo"涉及到的是在Android平台上集成百度地图API并实现语音导航功能的应用示例。这个demo通常包含完整的代码、资源文件以及必要的配置,旨在帮助开发者快速理解和学习如何在自己的应用程序...

    百度地图鹰眼轨迹SDK

    **百度地图鹰眼轨迹SDK详解** 百度地图鹰眼轨迹SDK是一款专门为开发者设计的地理位置服务工具,它能够帮助开发者轻松地在应用中实现对物体或人员的轨迹追踪、管理及展示功能。这款SDK提供了丰富的API接口,支持多种...

    利用百度地图的路书功能实现汽车实时定位

    4. **添加定位控件**:调用百度地图API的`BMap.GeolocationControl()`函数,添加定位控件到地图上。当用户点击该控件时,浏览器会请求用户的地理位置信息。 5. **实时定位**:通过`Geolocation`接口,获取汽车的GPS...

    百度手机地图实例大全

    1. **路线查询**:这是百度地图API的核心功能之一,允许开发者为用户提供精确的路线规划,包括驾车、公交和步行等多种出行方式。通过调用API,可以获取起点到终点的最优路径、预计时间和距离,以及中间的转向指示。 ...

    android 地图相关源码

    - **百度地图API**:百度地图提供了全面的SDK,包括地图展示、定位、路线规划等功能。源码可以帮助开发者理解如何集成API,实现地图的显示、标记、点击事件处理等,以及如何使用百度地图进行实时定位和路径规划。 ...

    物联网调用百度API实现车载定位

    2. **集成SDK**:选择适合物联网设备的操作系统(如Linux、RTOS等)的百度地图SDK进行集成。SDK包含了调用API所需的库文件和示例代码,便于快速开发。 3. **编写代码**:在物联网设备上编程,使用HTTP或HTTPS协议向...

    AngularJS 与百度地图的结合实例

    而百度地图API则是一个用于在网页上展示地图、定位、路线规划等服务的接口。 集成百度地图API的第一步是正确引入其JavaScript库。在HTML文件中,你需要在`&lt;head&gt;`或`&lt;body&gt;`标签内添加以下代码来引入API: ```html...

    类似百度地图的静态图标注,图层上根据鼠标点击创建小图层

    本项目主要涉及的是如何在类似百度地图的静态地图上实现标注功能,即“静态图标注”。通过对给定的标题和描述的理解,我们可以提炼出以下几个重要的知识点: 1. **静态地图标注**:与动态地图不同,静态地图不能...

    百度地图显示短信发过来的经纬度信息

    3. **调用百度地图API**:百度地图提供了JavaScript API,允许开发者在网页中嵌入地图并进行各种操作。通过调用`BMap.Point`类,我们可以创建一个表示经纬度的点对象,然后使用`BMap.Map`类创建地图实例,并设置中心...

    【大数据】城市公交网络分析与可视化(一):基于Python爬取公交车行驶路径等基本信息

    借助高德地图API,爬取指定公交线路(国内绝大多数线路,给定城市名和路线名即可)的始发站、终点站、行驶路径(行车轨迹)、站点名称和坐标、行驶距离等与公交车有关的基本信息,并将其保存到Execl表格中!...

    基于轨迹数据挖掘的路径规划系统的设计与实现.pdf

    本文提到的路径规划系统正是基于这样的理念,通过分析大量出租车的轨迹数据,挖掘出频繁出现的行车轨迹模式,进而向司机提供一条根据历史数据得出的最佳路径。 系统的设计采用了B/S(浏览器/服务器)架构的应用模式...

    基于C#的GPS车辆监控系统源码.zip

    6. **地图集成**:系统通常会集成第三方地图API,如高德地图或百度地图,提供地图展示、导航等功能。C#提供了丰富的图形界面控件和API接口,方便地图的集成和操作。 7. **数据分析**:通过对收集的数据进行统计和...

    基于android的骑行软件

    通常,我们会利用Google Maps API或其他地图服务提供商如高德地图、百度地图等,通过调用其提供的接口来获取地图数据、进行路线规划。开发者需要处理用户的起点和终点输入,使用Dijkstra算法或A*寻路算法计算最优...

Global site tag (gtag.js) - Google Analytics