百度地图API 路线模拟

<!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>

<title>参考线路</title>

</head>

<body>

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

</body>

</html>

<script src="./lib/base/base.js"></script>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4d06aa5b2c816cc52a1a9cd008808c68"></script>

<script type="text/javascript">

var lon=getQueryString(‘lon‘) //目标位置

var lat=getQueryString(‘lat‘)

var mylon=getQueryString(‘mylon‘)//自己的位置

var mylat=getQueryString(‘mylat‘)

// 百度地图API功能

//添加地图类型控件

var map = new BMap.Map("allmap");

map.centerAndZoom(new BMap.Point(lon,lat), 15);

//增加比例尺

var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角,添加比例尺

var top_left_navigation = new BMap.NavigationControl(); //左上角,添加默认缩放平移控件

var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角

map.addControl(top_left_control); //增加比例尺

map.addControl(top_left_navigation);

map.addControl(top_right_navigation);

var myP1 = new BMap.Point(lon,lat); //起点

var myP2 = new BMap.Point(mylon,mylat); //终点

var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/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: 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);

},60);

}

}

setTimeout(function(){

resetMkPoint(5);

},100)

});

}

setTimeout(function(){

run();

},1500);

</script>

原文地址:https://www.cnblogs.com/zhuwu/p/8184957.html

时间: 2025-01-17 01:33:51

百度地图API 路线模拟的相关文章

百度地图API制作类似 百度地图的路线导航界面并实现简单的路线规划功能

之前我们讲了怎么在百度地图上设置Marker(如A点..) 和弹出框(跟随Marker的,Marker移动的时候也是会跟着移动的),接着又觉得百度地图自带的放大缩小不(fei)是(chang)很(de)漂(chou)亮,我们自定义了放大缩小的控件,本篇我们将制作类似百度地图API制作类似百度地图的公交/驾车/行走/查询界面并实现简单的路线规划功能. 先来张截图:   这个界面的实现其实是使用的SlidingUpPanelLayout 开源库从而使得可以跟随手指下拉上划: 其实布局也没什么好讲的,

【百度地图API】自定义可编辑的交通路线

原文:[百度地图API]自定义可编辑的交通路线 任务描述: 我想自己绘制一条从地铁站出口到天安门的道路,而且还需要根据我的喜好来改变这条路线. 如何实现: 鼠标左击地图,绘制路线:双击后,绘制结束:绘制结束后,路线可编辑. TIPS: API1.1以后,可以使用enableEditing()来开启折线可编辑功能. 图示: 运行代码,请点击这里. 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &

【百度地图API】北京周边7日游——图标按路线轨迹行动

原文:[百度地图API]北京周边7日游--图标按路线轨迹行动 任务描述: 春节就要来啦~酸奶小妹的妈妈要从遥远的重庆,来到北京过春节呢!酸奶小妹忙着给妈妈计划,北京周边的旅游线路.计划好路线后,就开始驾车旅游啦~~ 如何实现: 利用百度地图API先确定几个坐标点points,把他们连成一条折线BMap.Polyline(points). 然后,更改标注图片为一辆小车,var myIcon = new BMap.Icon("car.png",...). 最后利用二次开发的类K_point

利用百度地图API和群蚁算法,对TSP问题进行模拟与求解

前言 最近由于换了工作,期间也有反思和总结上家公司的得失,总觉得有什么事情当初可以完成或者完成得更好,其中TSP问题就是其中之一.当初在开发一个仓配系统的时候,有一个线路排程的需求,当时自己简单在纸上画了思路,发现求精确解算法复杂度是N!,所以去百度,发现了NPC问题的概念,但是一直以来都没有对这个问题好好研究过,最终只是选择了贪心算法这一求近似解的方案,正好这是我的第一篇博客,就拿这个“遗憾”开刀吧. 1.  利用百度地图API模拟TSP的各个城市点 1.1. 调用百度地图API解析经纬度 这

Python调用百度地图API(路线规划、POI检索)——第一部分

项目的目的是为了查询某个点附近某些POI的最近距离,例如查询天安门到附近最近的商场的距离(时间) 1.百度地图API 程序中用到百度地图的两个API,分别是 (1)路线规划服务(又名Direction API):http://lbsyun.baidu.com/index.php?title=webapi/direction-api-v2 (2)地点检索服务(又名Place API):http://lbsyun.baidu.com/index.php?title=webapi/guide/webs

百度地图api文档实现任意两点之间的最短路线规划

两个点之间的路线是使用“Marker”点连接起来的,目前还没找到改变点颜色的方法,测试过使用setStyle没有效果. <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="initial-scale=1.0, user-sc

Android应用中使用百度地图API定位自己的位置(二)

官方文档:http://developer.baidu.com/map/sdkandev-6.htm#.E7.AE.80.E4.BB.8B3 百度地图SDK为开发者们提供了如下类型的地图覆盖物: 我的位置图层(MyLocationOverlay):用于显示用户当前位置的图层(支持自定义位置图标): Poi搜索结果图层(PoiOverlay):用于显示兴趣点搜索结果的图层: 路线图层(RouteOverlay):公交.步行和驾车线路图层,将公交.步行和驾车出行方案的路线及关键点显示在地图上(起.终

百度地图API

本文我将从如何使用地图API(本文以百度为例,谷歌类似)开始,往后的扩展行的内容详见后续文章.1.打开链接http://developer.baidu.com/map/jshome.htm  这里有很多DEMO,或者你直接百度搜索“百度地图API”,第一个就是.进入后有很多方向供你选择,由于现在开源的地图API都是JS脚本写的,所以我上面的链接就只针对JAVASCRIPT进行介绍.  即使是编程菜鸟(像我这种),也知道当你在任何一个开发环境下写代码时,都需要加入头文件,例如,你要在C++里使用c

百度地图API和高德地图API资料集锦

[高德地图API]从零开始学高德JS API(五)路线规划--驾车|公交|步行 [高德地图API]从零开始学高德JS API(四)搜索服务--POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索 [高德地图API]从零开始学高德JS API(三)覆盖物--标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 [高德地图API]从零开始学高德JS API(二)地图控件与插件--测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 [高德地图API]从零开始学高德JS API