百度地图看出行轨迹教程-九机网
Hi，欢迎来九机！
扫描二维码下载
输入手机号码并免费拨打：
热门搜索：
百度地图拥有一个“我的足迹”功能，可以把我们的出行轨迹全都记录下来，就算是用于回忆，应该也是一件挺好玩的事情。百度地图看出行轨迹教程1、打开百度地图，在其主界面找到并点击【我的】一栏，然后选择【我的足迹】2）然后点击一下【开始轨迹记录】，然后在百度地图就会记录我们的行动轨迹，完成之后点击右下方的【停止】
扫描到手机&&资讯随时看
扫一扫，用手机看资讯
还可以分享给好友哟~
上传仅支持word文件
为方便您的投稿，请将您的文章整理成word文档再上传。
各门店营业时间：周一至周日 09:00-21:30 &&&& 全国服务热线：400-008-3939 &&9 &&&& 工作时间：周一至周日 09:00-21:30
网站ICP备案号： &&&& 电信业务经营许可证：滇B2-号 &&&& 云南网警ICP备案 52 &&&&
Copyright (C) 2006 - 2017 九机网 All Rights Reserved
云南叁玖网络科技公司版权所有
loading...4386人阅读
百度地图SDK（2）
首先，对于百度地图SDK的配置和环境搭建就不做说明，需要的人可以博客中另一篇文章看 《iOS百度地图SDK基本使用》 ，本文的重点在于实现实时绘制轨迹的功能，并且对细节进行处理和优化
1、在AppDelegate.m文件中
#import &AppDelegate.h&
// BMapKit.h代表导入了所有的头文件
#import &BaiduMapAPI/BMapKit.h&
@interface AppDelegate ()&BMKGeneralDelegate&
BMKMapManager *mapM
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// 要使用地图，首先需要初始化和启动BMKMapManager
mapManager = [[BMKMapManager alloc]init];
// 填入验证码, 如需要使用网络和授权验证服务，则需要设置代理信息
BOOL ret = [mapManager start:@&在这里填入的是密钥中的安全码& generalDelegate:nil];
if (!ret) {
NSLog(@&地图管理器初始化失败&);
NSLog(@&初始化成功&);
return YES;
2、在ViewController.m文件中
#import &ViewController.h&
#import &BaiduMapAPI/BMapKit.h&
#define normalLocationTag 1
#define compassLocationTag 2
@interface ViewController () &BMKLocationServiceDelegate , BMKMapViewDelegate&
BMKMapView *mapV
BMKLocationService *locationS
// 用于手动验证
CLLocationManager *locationM
// 用于记录经过的点
NSMutableArray *locationP
// 在地图上绘制的折线
BMKPolyline *routeL
// 中间变量-&location类型(地理位置)
CLLocation *currentL
在viewDidLoad中将两个初始化体现出来
- (void)viewDidLoad {
[super viewDidLoad];
// 1、所有的初始化操作
[self initObjects];
// 2、所有的地图初始操作
[self operationForMap];
初始化操作的封装后的方法
- (void)initObjects
// 初始化mapView
mapView = [[BMKMapView alloc]initWithFrame:CGRectMake(0, 120, self.view.bounds.size.width, self.view.bounds.size.height)];
// 初始化locationService
locationService = [[BMKLocationService alloc]init];
对地图的各个参数进行操作封装后的方法
- (void)operationForMap
// 设置过滤距离，更新的最小间隔距离
[BMKLocationService setLocationDistanceFilter:6.0f];
// 设置定位精度模式
以前使用了kCLLocationAccuracyBest--& 表示在使用电池的最高精度
现在使用了kCLLocationAccuracyBestForNavigation--& 表示在外接电源的时候的最高精度(有些在AppStore上架的APP由于过度依赖于高精度的定位，所以采用了这种耗电的定位设置)
[BMKLocationService setLocationDesiredAccuracy:kCLLocationAccuracyBestForNavigation];
// 设置地图类型
mapView.mapType = BMKMapTypeS
// 设置是否需要热力图显示
[mapView setBaiduHeatMapEnabled:NO];
// 设置是否允许旋转地图
mapView.rotateEnabled = YES;&span style=&white-space:pre&&
// .....对于地图还有很多设置，这里不一一列举，需要的话可以在文档中查到&span style=&white-space:pre&&
[self.view addSubview:mapView];
- (void)operationForLocation:(BMKUserLocation *)userLocation
// 1、检查移动的距离，移除不合理的点
if (locationPoint.count & 0) {
CLLocationDistance distance = [userLocation.location distanceFromLocation:currentLocation];
if (distance & 5)
// 2、初始化坐标点数组
if (nil == locationPoint) {
locationPoint = [[NSMutableArray alloc] init];
// 3、将合理的点添加到数组
[locationPoint addObject:userLocation.location];
// 4、作为前一个坐标位置辅助操作
currentLocation = userLocation.
// 5、开始画线
[self configureRoutes];
// 6、实时更新用户位子
[mapView updateLocationData:userLocation];
#pragma mark - 点击两个button触发的事件
- (IBAction)startLocation:(UIButton *)button
// 由于IOS8中定位的授权机制改变 需要进行手动授权(导致程序无法进行定位的主要原因)
if ([[UIDevice currentDevice].systemVersion floatValue] &= 8) {
locationManager = [[CLLocationManager alloc] init];
[locationManager requestAlwaysAuthorization];
[locationManager requestWhenInUseAuthorization];
// 开启用户定位
[locationService startUserLocationService];
// 开始先关闭地位图层(也就是定位的小圆点)--&用户体验问题
mapView.showsUserLocation = NO;
// 根据所点击的button来开启不同的定位模式
if (button.tag == normalLocationTag) {
mapView.userTrackingMode = BMKUserTrackingModeF
}else if(button.tag == compassLocationTag) {
mapView.userTrackingMode = BMKUserTrackingModeFollowWithH
mapView.showsUserLocation = YES;
// 1、通过比例调试地图的显示
[mapView setZoomEnabled:YES];
mapView.zoomLevel = 19;// 级别是 3-19
// 2、通过范围调试地图的显示
BMKCoordinateRegion adjustRegion = [mapView regionThatFits:BMKCoordinateRegionMake(locationService.userLocation.location.coordinate, BMKCoordinateSpanMake(0.03f,0.03f))];
[mapView setRegion:adjustRegion animated:YES];
#pragma mark - 视图的出现和消失(在其中设置代理和取消代理，优化内存管理)
- (void)viewWillAppear:(BOOL)animated
[mapView viewWillAppear];
mapView.delegate =
locationService.delegate =
- (void)viewWillDisappear:(BOOL)animated
[mapView viewWillDisappear];
// 一般情况下都需要在这里关闭掉代理，但是由于本程序需要在后台继续绘制轨迹，因为对应的代理方法是绘制轨迹，所以继续设置代理
mapView.delegate =
locationService.delegate =
#pragma mark - mapView的协议
- (BMKOverlayView *)mapView:(BMKMapView *)mapView viewForOverlay:(id&BMKOverlay&)overlay
if ([overlay isKindOfClass:[BMKPolyline class]]) {
BMKPolylineView *polylineView = [[BMKPolylineView alloc]initWithPolyline:overlay];
// 设置划出的轨迹的基本属性--&也是使得定位看起来更加准确的主要原因
polylineView.strokeColor = [[UIColor blueColor]colorWithAlphaComponent:0.5];
polylineView.fillColor = [[UIColor blueColor]colorWithAlphaComponent:0.8];
polylineView.lineWidth = 6.0;
return polylineV
#pragma mark - 绘制轨迹
-(void)configureRoutes
// 1、分配内存空间给存储经过点的数组
BMKMapPoint* pointArray = (BMKMapPoint *)malloc(sizeof(CLLocationCoordinate2D) * locationPoint.count);
// 2、创建坐标点并添加到数组中
for(int idx = 0; idx & locationPoint. idx++)
CLLocation *location = [locationPoint objectAtIndex:idx];
CLLocationDegrees latitude
= location.coordinate.
CLLocationDegrees longitude = location.coordinate.
CLLocationCoordinate2D coordinate = CLLocationCoordinate2DMake(latitude, longitude);
BMKMapPoint point = BMKMapPointForCoordinate(coordinate);
pointArray[idx] =
// 3、防止重复绘制
if (routeLine) {
//在地图上移除已有的坐标点
[mapView removeOverlay:routeLine];
// 4、画线
routeLine = [BMKPolyline polylineWithPoints:pointArray count:locationPoint.count];
// 5、将折线(覆盖)添加到地图
if (nil != routeLine) {
[mapView addOverlay:routeLine];
// 6、清楚分配的内存
free(pointArray);
#pragma mark - 更新用户位置时所调用的三种方法
// 更新位置
- (void)didUpdateBMKUserLocation:(BMKUserLocation *)userLocation
// 说明:由于开启了“无限后台”的外挂模式(^-^)所以可以直接写操作代码，然后系统默认在任何情况执行，但是为了已读，规划代码如下
// 1、活跃状态
if ([UIApplication sharedApplication].applicationState == UIApplicationStateActive) {
[self operationForLocation:userLocation];
}else if([UIApplication sharedApplication].applicationState == UIApplicationStateBackground)
// 2、后台模式
[self operationForLocation:userLocation];
// 3、不活跃模式
else if ([UIApplication sharedApplication].applicationState == UIApplicationStateInactive)
[self operationForLocation:userLocation];
// 更新方向
- (void)didUpdateUserHeading:(BMKUserLocation *)userLocation
[mapView updateLocationData:userLocation];
// 定位失败了会调用
- (void)didFailToLocateUserWithError:(NSError *)error
NSLog(@&did failed locate,error is %@&,[error localizedDescription]);
到这里，代码就结束了，在viewWillDisappear中，依然没有关掉代理，是想让程序在锁屏后，或者是点击home键返回到桌面后仍然执行轨迹的绘制，但是仅仅设置代理是不够的，在没有进行配置的情况下，iOS系统最多可以让一个APP在有5秒钟的时间，用来进行保存和清理资源等任务。如果应用调用了UIApplication的beginBackgroundTaskWithExpirationHandler的方法，可以让APP在后台有10分组的运行时间，用来清理本地的缓存或者是进行数据的处理。超过了时间，APP便会被强制挂起
但是，就拿本例中所涉及的实时绘制轨迹来说，比如要开发一款跑步时绘制自己轨迹的应用，总不能跑步的时候都要将手机屏幕开着，并且还不能切换到其他地方，这样无疑增加了大量的电量消耗，所以，苹果也是为以下的几种提供了所谓的“无限后台”的外挂模式
1、Audio(音频播放)
2、Location/GPS(定位的实时更新)
3、Newsstand(杂志下载)
4、VoIP(网络电话)
所以，对于本例来说，苹果是允许启动外挂模式的，下面说明应该怎么配置这种模式
在info.plist文件中添加这样一项，Required background modes，然后这一项默认是数组类型，需要再在这项中添加一个item，默认生成了一项key为item0，接着将这个item0的value变为App registers for location updates
下面给出图例示范：
但是有人会想，那这样的话每个程序都可以开外挂了咯？话虽如此，但是在AppStore审核的时候，如果在plist文件中配置了这样的属性，那么AppStore会检测应用程序是否属于这种类型，如果不是的话，那么这样的APP就会被拒绝。
PS:demo的地址为 &
&&相关文章推荐
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：40041次
排名：千里之外
原创：53篇在原有的百度路书的基础上,做了修改,使其能实现边走边画线的需求.
源代码如下,其中您的密钥要换成自己的,如果不换,则需要粘贴到百度API示例里面的GPS路书的编辑器中才能运行
&html lang="en"&
&meta charset="utf-8" /&
&title&轨迹回放(路书)&/title&
&style type="text/css"&
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#map_canvas{width:100%;height:500}
#result {width:100%}
&script src="http://api./api?v=2.0&ak=您的密钥"&&/script&
&script type="text/javascript" src="http://api./library/LuShu/1.2/src/LuShu_min.js"&&/script&
&div id="map_canvas"&&/div&
&div id="result"&&/div&
&button id="run"&开始&/button&
&button id="stop"&停止&/button&
&button id="pause"&暂停&/button&
&button id="hide"&隐藏信息窗口&/button&
&button id="show"&展示信息窗口&/button&
var map = new BMap.Map('map_canvas');
map.enableScrollWheelZoom();
map.centerAndZoom();
// 实例化一个驾车导航用来生成路线
var drv = new BMap.DrivingRoute('北京', {
onSearchComplete: function(res) {
if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
var plan = res.getPlan(0);
// var arrPois =[];
for(var j=0;j&plan.getNumRoutes();j++){
var route = plan.getRoute(j);
arrPois= arrPois.concat(route.getPath());
var arrPois=[new BMap.Point(116..914004),new BMap.Point(116..913938),new BMap.Point(116..913938),new BMap.Point(116..913928),new BMap.Point(116..913927),new BMap.Point(116..913926),new BMap.Point(116..913923),new BMap.Point(116..913921),new BMap.Point(116.908),new BMap.Point(116..913875),new BMap.Point(116..913852),new BMap.Point(116..913835),new BMap.Point(116..913683),new BMap.Point(116..913681),new BMap.Point(116..913658),new BMap.Point(116..913664),new BMap.Point(116..91349),new BMap.Point(116.456),new BMap.Point(116..913461),new BMap.Point(116..913457),new BMap.Point(116..913463),new BMap.Point(116..913424),new BMap.Point(116..913429),new BMap.Point(116..913425),new BMap.Point(116..913399),new BMap.Point(116..913396),new BMap.Point(116.391),new BMap.Point(116..913395),new BMap.Point(116..913402),new BMap.Point(116..913403),new BMap.Point(116..913402),new BMap.Point(116.394),new BMap.Point(116..913372),new BMap.Point(116..91337),new BMap.Point(116..913369),new BMap.Point(116..913365),new BMap.Point(116..913348),new BMap.Point(116.346),new BMap.Point(116..913343),new BMap.Point(116..913341),new BMap.Point(116.344),new BMap.Point(116..913342),new BMap.Point(116..913331),new BMap.Point(116..913307),new BMap.Point(116..913282),new BMap.Point(116..913227),new BMap.Point(116..913226),new BMap.Point(116.21),new BMap.Point(116..913171),new BMap.Point(116..913169),new BMap.Point(116..913166),new BMap.Point(116..913175),new BMap.Point(116..913103),new BMap.Point(116..913109),new BMap.Point(116..913105),new BMap.Point(116..913104),new BMap.Point(116..91312),new BMap.Point(116..913094),new BMap.Point(116..913087),new BMap.Point(116..913086),new BMap.Point(116..913193),new BMap.Point(116..913262),new BMap.Point(116..913311),new BMap.Point(116..913391),new BMap.Point(116..913541),new BMap.Point(116..913771),new BMap.Point(116..913821),new BMap.Point(116..91432),new BMap.Point(116..914809),new BMap.Point(116..915039),new BMap.Point(116..915198),new BMap.Point(116..915377),new BMap.Point(116..915527),new BMap.Point(116..915676),new BMap.Point(116..915905),new BMap.Point(116..915905),new BMap.Point(116..916154),new BMap.Point(116..916154),new BMap.Point(116..916444),new BMap.Point(116..916694),new BMap.Point(116..917936),new BMap.Point(116..918974),new BMap.Point(116..919494),new BMap.Point(116..919673),new BMap.Point(116..919723),new BMap.Point(116..919763),new BMap.Point(116..919813),new BMap.Point(116..920293),new BMap.Point(116..920393),new BMap.Point(116..922131),new BMap.Point(116..922441),new BMap.Point(116..92405),new BMap.Point(116..92422),new BMap.Point(116..9243),new BMap.Point(116..92446),new BMap.Point(116..925599),new BMap.Point(116..925818),new BMap.Point(116..926798),new BMap.Point(116..927057),new BMap.Point(116..927277),new BMap.Point(116..928407),new BMap.Point(116..929326),new BMap.Point(116..929466),new BMap.Point(116..929486),new BMap.Point(116..931454),new BMap.Point(116..931694),new BMap.Point(116..931834),new BMap.Point(116..932393),new BMap.Point(116..933293),new BMap.Point(116..933313),new BMap.Point(116..934892),new BMap.Point(116..936531),new BMap.Point(116..93769),new BMap.Point(116..93804),new BMap.Point(116..938159),new BMap.Point(116..938209),new BMap.Point(116..938259),new BMap.Point(116..938509),new BMap.Point(116..939329),new BMap.Point(116..940878),new BMap.Point(116..941888),new BMap.Point(116..942108),new BMap.Point(116..942138),new BMap.Point(116..942398),new BMap.Point(116..942597),new BMap.Point(116..943287),new BMap.Point(116..943637),new BMap.Point(116..944746),new BMap.Point(116..946046),new BMap.Point(116..946196),new BMap.Point(116..946226),new BMap.Point(116..946276),new BMap.Point(116..946326),new BMap.Point(116..946436),new BMap.Point(116.876),new BMap.Point(116.595),new BMap.Point(116.167),new BMap.Point(116.339),new BMap.Point(116..948611),new BMap.Point(116..948914),new BMap.Point(116..949197),new BMap.Point(116..94943),new BMap.Point(116..949604),new BMap.Point(116..949851),new BMap.Point(116.052),new BMap.Point(116..950366),new BMap.Point(116..950429),new BMap.Point(116..950524),new BMap.Point(116..950556),new BMap.Point(116..950863),new BMap.Point(116..951127),new BMap.Point(116..952029),new BMap.Point(116..952072),new BMap.Point(116..952315),new BMap.Point(116..952482),new BMap.Point(116.024),new BMap.Point(116..953378),new BMap.Point(116..953536),new BMap.Point(116..953598),new BMap.Point(116..95386),new BMap.Point(116..95386),new BMap.Point(116..953895),new BMap.Point(116..95396),new BMap.Point(116..954035),new BMap.Point(116..954099),new BMap.Point(116..954131),new BMap.Point(116..954216),new BMap.Point(116..954237),new BMap.Point(116..954312),new BMap.Point(116..954358),new BMap.Point(116..954391),new BMap.Point(116..954458),new BMap.Point(116..954491),new BMap.Point(116..954504),new BMap.Point(116..954505),new BMap.Point(116..954517),new BMap.Point(116..954531),new BMap.Point(116..954558),new BMap.Point(116..954598),new BMap.Point(116..954599),new BMap.Point(116..954611),new BMap.Point(116..954664),new BMap.Point(116..954697),new BMap.Point(116..954712),new BMap.Point(116..954744),new BMap.Point(116.759),new BMap.Point(116.76),new BMap.Point(116..954795),new BMap.Point(116..954882),new BMap.Point(116..954903),new BMap.Point(116..954914),new BMap.Point(116..954935),new BMap.Point(116..954946),new BMap.Point(116..954987),new BMap.Point(116..955019),new BMap.Point(116..955029),new BMap.Point(116..95507),new BMap.Point(116..955121),new BMap.Point(116..955162),new BMap.Point(116..955183),new BMap.Point(116..955244),new BMap.Point(116..955315),new BMap.Point(116..955345),new BMap.Point(116..955518),new BMap.Point(116..955609),new BMap.Point(116..95568),new BMap.Point(116..955811),new BMap.Point(116.953),new BMap.Point(116..956206),new BMap.Point(116..956317),new BMap.Point(116..956529),new BMap.Point(116..95657),new BMap.Point(116..956974),new BMap.Point(116..957267),new BMap.Point(116..957358),new BMap.Point(116..957459),new BMap.Point(116..95757),new BMap.Point(116..95768),new BMap.Point(116..957841),new BMap.Point(116..958002),new BMap.Point(116..958162),new BMap.Point(116..958293),new BMap.Point(116..958473),new BMap.Point(116..958623),new BMap.Point(116..958623),new BMap.Point(116..960014),new BMap.Point(116..960984),new BMap.Point(116..961295),new BMap.Point(116..961865),new BMap.Point(116..962295),new BMap.Point(116.275),new BMap.Point(116..963644),new BMap.Point(116..964123),new BMap.Point(116..964143),new BMap.Point(116..964715),new BMap.Point(116..965356),new BMap.Point(116..966067),new BMap.Point(116..966538),new BMap.Point(116..966629),new BMap.Point(116..96726),new BMap.Point(116..969935),new BMap.Point(116..970407),new BMap.Point(116..9718),new BMap.Point(116..972673),new BMap.Point(116..973505),new BMap.Point(116..973796),new BMap.Point(116..973796),new BMap.Point(116..974166),new BMap.Point(116..974317),new BMap.Point(116..974427),new BMap.Point(116..974608),new BMap.Point(116..975129),new BMap.Point(116..975199),new BMap.Point(116..975309),new BMap.Point(116..975931),new BMap.Point(116..976803),new BMap.Point(116..978957),new BMap.Point(116..979127),new BMap.Point(116..979228),new BMap.Point(116..979829),new BMap.Point(116..981111),new BMap.Point(116..981592),new BMap.Point(116..982294),new BMap.Point(116..982684),new BMap.Point(116..982864),new BMap.Point(116..982953),new BMap.Point(116..983003),new BMap.Point(116..983054),new BMap.Point(116..983333),new BMap.Point(116..983782),new BMap.Point(116..984381),new BMap.Point(116.779),new BMap.Point(116..987338),new BMap.Point(116..987906),new BMap.Point(116..988015),new BMap.Point(116..988195),new BMap.Point(116..988971),new BMap.Point(116..989529),new BMap.Point(116..990087),new BMap.Point(116..990823),new BMap.Point(116..991072),new BMap.Point(116..991819),new BMap.Point(116..992993),new BMap.Point(116..993123),new BMap.Point(116..993471),new BMap.Point(116..993591),new BMap.Point(116..99374),new BMap.Point(116..993889),new BMap.Point(116..993939),new BMap.Point(116..994048),new BMap.Point(116..995631),new BMap.Point(116..99591),new BMap.Point(116..996995),new BMap.Point(116..997034),new BMap.Point(116..997829),new BMap.Point(116..997919),new BMap.Point(116..998425),new BMap.Point(116..998841),new BMap.Point(116.118),new BMap.Point(116..999513),new BMap.Point(116..000135),new BMap.Point(116..000253),new BMap.Point(116..000658),new BMap.Point(116..000777),new BMap.Point(116..001506),new BMap.Point(116..002088),new BMap.Point(116..002739),new BMap.Point(116..003163),new BMap.Point(116..003902),new BMap.Point(116..004385),new BMap.Point(116..005213),new BMap.Point(116..006032),new BMap.Point(116..006564),new BMap.Point(116..007333),new BMap.Point(116..007431),new BMap.Point(116..00752),new BMap.Point(116..007559),new BMap.Point(116..007589),new BMap.Point(116..007983),new BMap.Point(116..008486),new BMap.Point(116..010616),new BMap.Point(116..011406),new BMap.Point(116..011791),new BMap.Point(116..013577),new BMap.Point(116..014386),new BMap.Point(116..014514),new BMap.Point(116.244),new BMap.Point(116.373),new BMap.Point(116..015935),new BMap.Point(116..017208),new BMap.Point(116..017652),new BMap.Point(116..018443),new BMap.Point(116..018946),new BMap.Point(116..019883),new BMap.Point(116.752),new BMap.Point(116..02162),new BMap.Point(116..023695),new BMap.Point(116..024585),new BMap.Point(116..025317),new BMap.Point(116..025762),new BMap.Point(116..025959),new BMap.Point(116..026711),new BMap.Point(116..027156),new BMap.Point(116.463),new BMap.Point(116..02776),new BMap.Point(116..02779),new BMap.Point(116..027899),new BMap.Point(116..027899),new BMap.Point(116..027948),new BMap.Point(116..028107),new BMap.Point(116..028236),new BMap.Point(116..028385),new BMap.Point(116..028474),new BMap.Point(116..028524),new BMap.Point(116..028712),new BMap.Point(116..028881),new BMap.Point(116..028941),new BMap.Point(116..028961),new BMap.Point(116..02903),new BMap.Point(116..02912),new BMap.Point(116..029199),new BMap.Point(116..029219),new BMap.Point(116..029259),new BMap.Point(116..029299),new BMap.Point(116..029338),new BMap.Point(116..029388),new BMap.Point(116..029438),new BMap.Point(116..029488),new BMap.Point(116..029539),new BMap.Point(116..029589),new BMap.Point(116..029639),new BMap.Point(116..029679),new BMap.Point(116..02972),new BMap.Point(116..02976),new BMap.Point(116..029791),new BMap.Point(116..029821),new BMap.Point(116..029841),new BMap.Point(116..029862),new BMap.Point(116..029872),new BMap.Point(116..029883),new BMap.Point(116..029894),new BMap.Point(116..029904),new BMap.Point(116..029905),new BMap.Point(116..029906),new BMap.Point(116..029907),new BMap.Point(116..029887),new BMap.Point(116..029878),new BMap.Point(116..029859),new BMap.Point(116..02984),new BMap.Point(116..029811),new BMap.Point(116..029781),new BMap.Point(116..029742),new BMap.Point(116..029692),new BMap.Point(116..029643),new BMap.Point(116..029593),new BMap.Point(116..029544),new BMap.Point(116..029504),new BMap.Point(116..029464),new BMap.Point(116..029424),new BMap.Point(116..029374),new BMap.Point(116..029323),new BMap.Point(116..029273),new BMap.Point(116..029233),new BMap.Point(116..029202),new BMap.Point(116..029172),new BMap.Point(116..029141),new BMap.Point(116..029101),new BMap.Point(116..02906),new BMap.Point(116..02904),new BMap.Point(116..029009),new BMap.Point(116..028989),new BMap.Point(116..028968),new BMap.Point(116..028948),new BMap.Point(116..028946),new BMap.Point(116..028942),new BMap.Point(116..028941),new BMap.Point(116..028939),new BMap.Point(116..028936),new BMap.Point(116..028937),new BMap.Point(116..028945),new BMap.Point(116..028951),new BMap.Point(116..028946),new BMap.Point(116..028946),new BMap.Point(116..028947),new BMap.Point(116..028946),new BMap.Point(116..028931),new BMap.Point(116..028929),new BMap.Point(116..028929),new BMap.Point(116..028928),new BMap.Point(116..028937),new BMap.Point(116..028934),new BMap.Point(116..028941),new BMap.Point(116..028938),new BMap.Point(116..028934),new BMap.Point(116..028941),new BMap.Point(116..02894),new BMap.Point(116..028934),new BMap.Point(116..028937),new BMap.Point(116..028961),new BMap.Point(116..028971),new BMap.Point(116..028925),new BMap.Point(116..028925),new BMap.Point(116..028925),new BMap.Point(116..028888),new BMap.Point(116..028704),new BMap.Point(116..028537),new BMap.Point(116..028331),new BMap.Point(116..02754),new BMap.Point(116..027539),new BMap.Point(116..027532),new BMap.Point(116..027464),new BMap.Point(116..027388),new BMap.Point(116..027321),new BMap.Point(116.336),new BMap.Point(116..02738),new BMap.Point(116..027494),new BMap.Point(116..027659),new BMap.Point(116..027679),new BMap.Point(116..027946),new BMap.Point(116..028252),new BMap.Point(116..028617),new BMap.Point(116..029801),new BMap.Point(116..0298),new BMap.Point(116..031463),new BMap.Point(116..031744),new BMap.Point(116..032911),new BMap.Point(116..033112),new BMap.Point(116..035059),new BMap.Point(116..035672),new BMap.Point(116..035913),new BMap.Point(116..036174),new BMap.Point(116..036465),new BMap.Point(116..036576),new BMap.Point(116..037018),new BMap.Point(116..038366),new BMap.Point(116..039103),new BMap.Point(116.136),new BMap.Point(116..040299),new BMap.Point(116..041552),new BMap.Point(116..043356),new BMap.Point(116..043468),new BMap.Point(116..043489),new BMap.Point(116..04357),new BMap.Point(116..043682),new BMap.Point(116..043733),new BMap.Point(116..043764),new BMap.Point(116..044202),new BMap.Point(116..044222),new BMap.Point(116..044821),new BMap.Point(116..044983),new BMap.Point(116..046077),new BMap.Point(116..046673),new BMap.Point(116..047743),new BMap.Point(116..049116),new BMap.Point(116.552),new BMap.Point(116..051744),new BMap.Point(116..053022),new BMap.Point(116..053519),new BMap.Point(116..056347),new BMap.Point(116..05658),new BMap.Point(116..056712),new BMap.Point(116..056783),new BMap.Point(116..056985),new BMap.Point(116.037),new BMap.Point(116..059442),new BMap.Point(116..059473),new BMap.Point(116..06015),new BMap.Point(116..06015),new BMap.Point(116..06048),new BMap.Point(116..060772),new BMap.Point(116..061943),new BMap.Point(116..062044),new BMap.Point(116..062488),new BMap.Point(116..062568),new BMap.Point(116..062629),new BMap.Point(116..064021),new BMap.Point(116..064488),new BMap.Point(116..064634),new BMap.Point(116..064707),new BMap.Point(116..064759),new BMap.Point(116..064834),new BMap.Point(116.791),new BMap.Point(116..064622),new BMap.Point(116..064163),new BMap.Point(116..063863),new BMap.Point(116..06374),new BMap.Point(116..063682),new BMap.Point(116..063681),new BMap.Point(116..063199),new BMap.Point(116..060475),new BMap.Point(116..060395),new BMap.Point(116..060064),new BMap.Point(116.18),new BMap.Point(116..058558),new BMap.Point(116..058518),new BMap.Point(116..058015),new BMap.Point(116..057151),new BMap.Point(116..056358),new BMap.Point(116..056207),new BMap.Point(116..055946),new BMap.Point(116..055212),new BMap.Point(116..054951),new BMap.Point(116..05494),new BMap.Point(116..05502),new BMap.Point(116..055019),new BMap.Point(116..05523),new BMap.Point(116..055964),new BMap.Point(116..056375),new BMap.Point(116..057169),new BMap.Point(116..058033),new BMap.Point(116..058033),new BMap.Point(116..058347),new BMap.Point(116..058347),new BMap.Point(116..05729),new BMap.Point(116..05717),new BMap.Point(116..05717),new BMap.Point(116..057169)];
map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#111'})); //不画线
map.setViewport(arrPois);
marker=new BMap.Marker(arrPois[0],{
: new BMap.Icon('/map/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)})
var label = new BMap.Label("粤A30780",{offset:new BMap.Size(0,-30)});
label.setStyle({border:"1px solid rgb(204, 204, 204)",color: "rgb(0, 0, 0)",borderRadius:"10px",padding:"5px",background:"rgb(255, 255, 255)",});
marker.setLabel(label);
map.addOverlay(marker);
BMapLib.LuShu.prototype._move=function(initPos,targetPos,effect) {
var pointsArr=[initPos,targetPos]; //点数组
var me = this,
//当前的帧数
currentCount = 0,
//步长，米/秒
timer = 10,
step = this._opts.speed / (1000 / timer),
//初始坐标
init_pos = this._projection.lngLatToPoint(initPos),
//获取结束点的(x,y)坐标
target_pos = this._projection.lngLatToPoint(targetPos),
//总的步长
count = Math.round(me._getDistance(init_pos, target_pos) / step);
//显示折线 syj
this._map.addOverlay(new BMap.Polyline(pointsArr, {
strokeColor : "#111",
strokeWeight : 5,
strokeOpacity : 0.5
})); // 画线
//如果小于1直接移动到下一点
if (count & 1) {
me._moveNext(++me.i);
me._intervalFlag = setInterval(function() {
//两点之间当前帧数大于总帧数的时候，则说明已经完成移动
if (currentCount &= count) {
clearInterval(me._intervalFlag);
//移动的点已经超过总的长度
if(me.i & me._path.length){
//运行下一个点
me._moveNext(++me.i);
currentCount++;
var x = effect(init_pos.x, target_pos.x, currentCount, count),
y = effect(init_pos.y, target_pos.y, currentCount, count),
pos = me._projection.pointToLngLat(new BMap.Pixel(x, y));
//设置marker
if(currentCount == 1){
var proPos =
if(me.i - 1 &= 0){
proPos = me._path[me.i - 1];
if(me._opts.enableRotation == true){
me.setRotation(proPos,initPos,targetPos);
if(me._opts.autoView){
if(!me._map.getBounds().containsPoint(pos)){
me._map.setCenter(pos);
//正在移动
me._marker.setPosition(pos);
//设置自定义overlay的位置
me._setInfoWin(pos);
lushu = new BMapLib.LuShu(map,arrPois,{
defaultContent:"粤A30780",//"从天安门到百度大厦"
autoView:true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
: new BMap.Icon('/map/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)}),
speed: 4500,
enableRotation:true,//是否设置marker随着道路的走向进行旋转
landmarkPois:[
{lng:116.306954,lat:40.05718,html:'加油站',pauseTime:2}
marker.addEventListener("click",function(){
marker.enableMassClear(); //设置后可以隐藏改点的覆盖物
marker.hide();
lushu.start();
//map.clearOverlays(); //清除所有覆盖物
//drv.search('天安门', '百度大厦');
// lushu.start();
// lushu.pause();
//绑定事件
$("run").onclick = function(){
marker.enableMassClear(); //设置后可以隐藏改点的覆盖物
marker.hide();
lushu.start();
// map.clearOverlays(); //清除所有覆盖物
$("stop").onclick = function(){
lushu.stop();
$("pause").onclick = function(){
lushu.pause();
$("hide").onclick = function(){
lushu.hideInfoWindow();
$("show").onclick = function(){
lushu.showInfoWindow();
function $(element){
return document.getElementById(element);
　　其中,arrPois的点是自定义点,非常适合做轨迹回放用.
　　注意:landmarkPois 必须要定义,如果没有要显示的点话,就写成[],不能为空,否则会无法运行.
　　实现边走边画线,首先将百度路书中的画线代码注释掉,然后重写_move方法,参见代码中的重写_move方法.基于此可以实现更加复杂的各种附加信息.
　　其效果如下图:
　　也算是给后人留点启发吧
阅读(...) 评论()