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

最新推荐文章于 2024-02-26 14:13:27 发布
最新推荐文章于 2024-02-26 14:13:27 发布
阅读量1k 收藏 2
点赞数
分类专栏： map 文章标签： 百度 map
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_16198/article/details/82475126
版权
<!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='开始' οnclick='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>

--摘自互联网
iteye_16198
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
百度地图API 驾车路线的自定义绘制
04-15
本文将深入探讨“百度地图API 驾车路线的自定义绘制”这一主题，帮助开发者理解如何利用百度地图API创建个性化且实用的驾车导航路线。 首先，我们需要了解百度地图API的基础。百度地图API是一个JavaScript接口，它...
【百度地图API】如何制作多途经点的线路导航——驾车篇
bahuanwa5356的博客
12-10 751
转自 http://www.cnblogs.com/milkmap/archive/2011/08/26/2154627.html<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <t...
【百度地图API】制作多途经点的线路导航
ccyy
02-23 2838
先创建一张地图的容器： <div class="pos-a" id="allmap" style="width: 100%; height: 95.5%;"> </div> 然后实例化地图： var map = new BMap.Map('allmap'); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); map.enableScrollWheelZoom(true); 创建几个坐标点
【QT--使用百度地图API显示地图并绘制路线】
a1379292747的博客
09-18 4208
先吐槽一下下，本身qt学的就不咋滴，谁想到第一件事就是让写一个上位机工具，根据CAN总线传来的位置信息，在地图上去绘制路线，并获取当前路段的限速信息等。当听到这个需求的时候，第一时间是有点懵逼的。自己原本是没接触过这方面的知识，而且qt学的也特别的垃圾，但是以我的性格还是答应了下来。最终也是花了几天的时间做了出来。通过做这个简单的小工具，自己也学到了还能多。接下来我就简单说一说如何使用百度地图API来显示地图并根据位置信息绘制路线这一功能。其他的就不方便说了。
百度地图API根据经纬度绘制轨迹图（Vue附源码）
Codernmx
03-17 5723
目录导入百度地图绘制轨迹左侧点击事件添加窗口页面完整代码 有用可以点个关注，收藏！！ vue版本百度地图官方组件：https://dafrok.github.io/vue-baidu-map/#/zh/start/usage 这里不是使用的这种办法，个人感觉不是很完整，需要的自己研究下。 导入百度地图 importBaiduMap () { var script = document.createElement('script'); script.src = 'https://api.map
AngularJS 与百度地图的结合实例
11-28
而百度地图API则是一个用于在网页上展示地图、定位、路线规划等服务的接口。 集成百度地图API的第一步是正确引入其JavaScript库。在HTML文件中，你需要在`<head>`或`<body>`标签内添加以下代码来引入API： ```html...
利用百度地图的路书功能实现汽车实时定位
10-06
4. **添加定位控件**：调用百度地图API的`BMap.GeolocationControl()`函数，添加定位控件到地图上。当用户点击该控件时，浏览器会请求用户的地理位置信息。 5. **实时定位**：通过`Geolocation`接口，获取汽车的GPS...
百度地图鹰眼轨迹SDK
03-09
**百度地图鹰眼轨迹SDK详解** 百度地图鹰眼轨迹SDK是一款专门为开发者设计的地理位置服务工具，它能够帮助开发者轻松地在应用中实现对物体或人员的轨迹追踪、管理及展示功能。这款SDK提供了丰富的API接口，支持多种...
angularbaidumaps百度地图AngularJs指令示例
08-07
通常包括`angular.js`、`angular-baidu-maps.min.js`以及百度地图API的JS文件。 **2. 配置依赖** 在你的AngularJS应用模块中注入`baiduMaps`模块，确保应用能使用这个指令集： ```javascript var app = angular....
百度地图划线，轨迹
03-19
百度地图API提供了轨迹回放、轨迹优化等高级功能，帮助开发者更好地理解和利用这些数据。 再次，**划线**功能则是在地图上绘制路径或区域，通常用于指示路线、设定边界或者展示特定区域。百度地图JavaScript API...
百度地图语音导航demo
09-17
【标题】"百度地图语音导航demo"涉及到的是在Android平台上集成百度地图API并实现语音导航功能的应用示例。这个demo通常包含完整的代码、资源文件以及必要的配置，旨在帮助开发者快速理解和学习如何在自己的应用程序...
物联网调用百度API实现车载定位
07-10
2. **集成SDK**：选择适合物联网设备的操作系统（如Linux、RTOS等）的百度地图SDK进行集成。SDK包含了调用API所需的库文件和示例代码，便于快速开发。 3. **编写代码**：在物联网设备上编程，使用HTTP或HTTPS协议向...
自制Android百度地图
04-24
同时，开发者通过调用百度地图API中的定位接口，能够实时更新并显示用户的移动轨迹。 二、经纬度搜索定位 基于经纬度的搜索定位允许用户输入特定的经纬度坐标，地图会自动跳转到对应的位置。这在需要精确导航或者...
百度地图显示短信发过来的经纬度信息
11-19
3. **调用百度地图API**：百度地图提供了JavaScript API，允许开发者在网页中嵌入地图并进行各种操作。通过调用`BMap.Point`类，我们可以创建一个表示经纬度的点对象，然后使用`BMap.Map`类创建地图实例，并设置中心...
百度地图API：自定义多个途经点的导航
热门推荐
Super girl的专栏
02-25 4万+
百度官方提供给开发者使用的多个途经点导航有一个限制是：途经点不超过10个。假设我手上就是有N个途经点需要进行一个轨迹的绘制，怎么办？然而，每个点和下一个点的路线必须是百度建议的路线。1、定义驾车对象：**onSearchComplete**函数可以获得每一次driving.search检索完成后的回调函数，这里可以拿到点集合进行绘制 var driving = new BMap.Drivi
百度地图JavaScript API GL 实现车辆轨迹功能
qq_27487739的博客
06-11 2802
需要注意的是，为了提高地图展示效果和性能，可以使用百度地图JavaScript API GL提供的相关功能，如自定义图层、灰度地图、动态效果等。创建并添加车辆标注：使用百度地图JavaScript API GL创建车辆的标注，并将标注添加到地图上。创建地图并展示：使用百度地图JavaScript API GL创建地图，并将地图展示在页面上。可以设置地图的中心点、缩放级别等属性。使用百度地图JavaScript API GL，开发者可以开发更加高效、功能丰富的地图应用，实现更加出色的地图展示效果。
使用百度地图api根据输入的过个经纬度进行轨迹绘制并且可以标记
最新发布
东方佑
02-26 1687
这段HTML和JavaScript代码的功能是允许用户在百度地图上根据输入的经纬度坐标绘制轨迹图，并给每个坐标点添加名称标记。同时，提供了放大、缩小、清除轨迹的功能。// 初始化地图，设置中心点坐标和地图级别。// 用于存储轨迹折线的变量。// 用于存储轨迹点的变量。// 添加地图类型控件。// 添加放大缩小控件。// 在地图上添加折线。// 为每个点添加名称。// 清除现有的轨迹。
通过百度地图API标记多点并实现导航方式
qq_38856773的博客
12-06 637
百度地图导航1 // 文字标注 var label = new window.BMap.Label(markerArr[i].title, { offset: new window.BMap.Size(20, -10) }); marker[i].setLabel(labe...
百度地图api绘制出行轨迹
05-12
要使用百度地图API绘制出行轨迹，你需要先获取到行车路线的经纬度坐标集合，然后使用百度地图API中的Polyline类将经纬度坐标集合绘制成折线，形成行车轨迹。 以下是一个简单的示例代码，可以根据自己的需求进行修改： ```javascript // 百度地图API功能 var map = new BMap.Map("container"); // 创建地图实例 map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图，设置中心点坐标和地图级别 map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放 // 绘制行车轨迹 var pointArray = [ new BMap.Point(116.399, 39.910), new BMap.Point(116.405, 39.920), new BMap.Point(116.410, 39.915) ]; // 行车路线的经纬度坐标集合 var polyline = new BMap.Polyline(pointArray, {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}); // 创建折线对象 map.addOverlay(polyline); // 添加折线到地图中 ``` 其中，`pointArray`数组存储了行车路线的经纬度坐标集合，`polyline`对象是使用`BMap.Polyline`类创建的折线对象，`map.addOverlay(polyline)`将折线添加到地图中进行显示。你可以根据实际需求修改经纬度坐标集合和折线的属性，如颜色、宽度、透明度等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值