【百度地图API】如何利用地图API制作汽车沿道路行驶的动画

注意题目是“沿道路行驶”

一、我们先来学习如何把百度地图“弄”出来。把下面这段代码保存为htm格式,用浏览器打开,就能看到百度地图了。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>点沿直线运动</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&services=true"></script>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container"); //创建地图容器
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15); //设置中心点和地图级别
</script>

二、再分析一下汽车导航制作者的这个需求:

1、车辆——用自定义图片的marker实现

var carMk = new BMap.Marker(pts[0],{icon:myIcon});
var myIcon = new BMap.Icon("Mario.png", new BMap.Size(32, 70), { //小车图片
 //offset: new BMap.Size(0, -5), //相当于CSS精灵
 imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
 });


 

2、获取道路数据——虽然百度地图API并未公开道路层数据,但我们可以巧妙的“拿到”。具体请往下看。

三、如何利用百度地图API拿到道路层的数据呢?

答案很简单:驾车导航。

首先讨论一下,为什么要用驾车导航,而不用步行和公交导航?

1、步行导航:步行导航显然能“穿越”公园、甚至小区,得到的肯定不是道路层的数据;

2、公交导航:公交导航虽然都是道路层的数据,但很局限,因为只有有公交车的地方,才有公交方案。并且,公交方法是包含了地铁线路的。

3、驾车导航:拥有所有道路层的数据,并且没有地铁、小区里、花园内这样的无效数据。

驾车导航示例:

var myP1 = new BMap.Point(116.380967,39.913285); //起点
var myP2 = new BMap.Point(116.424374,39.914668); //终点
var driving2 = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}}); //驾车实例
driving2.search(myP1, myP2); //显示一条公交线路

四、

那么,如何获得道路层的数据呢?

我们可以想象一下,驾车导航的路线,在API中是属于折线。

折线是由无数的点构成的。

也就是说,只要找到这些点,我们就能获取道路层的数据了。

我们发现,Route里有个接口getPath,可以获得路线的地理坐标点数组。并且,以point数组的形式返回。

 

利用创建好的驾车实例DrivingRoute,先search,得到一个驾车方案;

驾车方案中,选择第一条Route;

最后获得该Route的全部点。

注意,由于ajax的异步加载机制,我们需要利用搜索后的回调函数setSearchCompleteCallback,来进行道路数据的获得。

driving.setSearchCompleteCallback(function(){
 var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例,获得一系列点的数组
 var paths = pts.length; //获得有几个点
}


 

五、

道路数据获取完毕。接下来是汽车图片的展示。可以通过改变marker的坐标点来实现,改变marker坐标的接口setPosition。

我们假设每100毫秒改变一次,利用延时函数setTimeout。

同样,由于ajax异步加载原因,需要异步给i赋值。

i=0;
 function resetMkPoint(i){
 carMk.setPosition(pts[i]);
 if(i < paths){
 setTimeout(function(){
 i++;
 resetMkPoint(i);
 },100);
 }
 }
 setTimeout(function(){
 resetMkPoint(1);
 console.log(i);
 },100)


 

七、

最后,放出全部源代码:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>点沿直线运动</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&services=true"></script>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
<input type="button" value="开始" οnclick="run();" />
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
var myP1 = new BMap.Point(116.380967,39.913285); //起点
var myP2 = new BMap.Point(116.424374,39.914668); //终点
var myIcon = new BMap.Icon("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); //显示一条公交线路

function run(){
 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);
 },100);
 }
 }
 setTimeout(function(){
 resetMkPoint(5);
 console.log(i);
 },100)

 });
}
</script>


 

展开阅读全文

百度地图API,无法显示地图图层

03-18

刚刚开始学Android开发,想用百度地图API实现定位功能,按我的代码运行后只有定位的原点,看不到地图图层了,请问是我代码里漏了什么吗?多谢指点!!rnrn以下是代码:rn[code=java]package com.example.mymap;rnrnimport android.app.Activity;rnimport android.os.Bundle;rnimport android.util.Log;rnrnimport com.baidu.location.BDLocation;rnimport com.baidu.location.BDLocationListener;rnimport com.baidu.location.LocationClient;rnimport com.baidu.location.LocationClientOption;rnimport com.baidu.location.LocationClientOption.LocationMode;rnimport com.baidu.mapapi.BMapManager;rnimport com.baidu.mapapi.map.LocationData;rnimport com.baidu.mapapi.map.MapController;rnimport com.baidu.mapapi.map.MapView;rnimport com.baidu.mapapi.map.MyLocationOverlay;rnimport com.baidu.platform.comapi.basestruct.GeoPoint;rn rnpublic class MainActivity extends Activity rn rn BMapManager mBMapMan = null; rn MapView mMapView = null; rn rn public LocationData locData = new LocationData(); //储存我的位置rn public MyLocationOverlay myLocationOverlay = null;rn public LocationClient mLocationClient = null;rn public MyLocationListener myListener;rn rn @Override rn public void onCreate(Bundle savedInstanceState) rn super.onCreate(savedInstanceState); rn mBMapMan=new BMapManager(getApplication()); rn mBMapMan.init("FLC1HRWRaEvpIsmeZ471wF22", null); rn //注意:请在试用setContentView前初始化BMapManager对象,否则会报错 rn setContentView(R.layout.activity_main); rn mMapView=(MapView)findViewById(R.id.bmapsView); rn mMapView.setBuiltInZoomControls(true); rn //设置启用内置的缩放控件 rn MapController mMapController=mMapView.getController(); rn // 得到mMapView的控制权,可以用它控制和驱动平移和缩放 rn GeoPoint point =new GeoPoint((int)(39.915* 1E6),(int)(116.404* 1E6)); rn //用给定的经纬度构造一个GeoPoint,单位是微度 (度 * 1E6) rn mMapController.setCenter(point);//设置地图中心点 rn mMapController.setZoom(12);//设置地图zoom级别rn rn //实现定位rn myListener = new MyLocationListener();rn mLocationClient = new LocationClient(getApplicationContext()); //声明LocationClient类rn mLocationClient.registerLocationListener( myListener ); //注册监听函数rn rn LocationClientOption option = new LocationClientOption(); //设置定位参数rn option.setOpenGps(true); //打开GPRSrn option.setLocationMode(LocationMode.Hight_Accuracy);//设置定位模式rn option.setCoorType("bd09ll");//返回的定位结果是百度经纬度,默认值gcj02rn option.setScanSpan(5000);//设置发起定位请求的间隔时间为5000msrn option.setIsNeedAddress(true);//返回的定位结果包含地址信息rn option.setNeedDeviceDirect(true);//返回的定位结果包含手机机头的方向rn mLocationClient.setLocOption(option);rn rn //请求定位rn mLocationClient.requestLocation();rn rn myLocationOverlay = new MyLocationOverlay(mMapView);rn rn myLocationOverlay.setData(locData); rn mMapView.getOverlays().add(myLocationOverlay); rn mMapView.refresh(); rn mMapView.getController().animateTo(new GeoPoint((int)(locData.latitude*1e6), rn (int)(locData.longitude* 1e6)));rn rn rn rn rn public class MyLocationListener implements BDLocationListener rn rn @Overridern public void onReceiveLocation(BDLocation location) rn // TODO Auto-generated method stubrn if (location == null) rn Log.v("locData", "null");rn return;rn rn rn locData.latitude = location.getLatitude();rn locData.longitude = location.getLongitude();rn locData.direction = 2.0f;rn locData.accuracy = location.getRadius();rn locData.direction = location.getDerect();rn //myLocationOverlay.setData(locData);rn //mMapView.getOverlays().add(myLocationOverlay);rn /*Log.v("locData","onReceiveLocation"+ locData.latitude+" "+locData.longitude);rn mMapView.getController().animateTo(new GeoPoint((int)(locData.latitude*1e6), rn (int)(locData.longitude* 1e6)));rn mMapView.refresh(); */rn rn rn rn @Overridern public void onReceivePoi(BDLocation arg0) rn // TODO Auto-generated method stubrn if(arg0==null)rn return;rn rn rn rn rn @Override rn protected void onDestroy() rn mMapView.destroy(); rn if(mBMapMan!=null) rn mBMapMan.destroy(); rn mBMapMan=null; rn rn super.onDestroy(); rn rn @Override rn protected void onPause() rn mMapView.onPause(); rn if(mBMapMan!=null) rn mBMapMan.stop(); rn rn super.onPause(); rn rn @Override rn protected void onResume() rn mMapView.onResume(); rn if(mBMapMan!=null) rn mBMapMan.start(); rn rn super.onResume(); rn rn rn rn [/code]rnrn 论坛

没有更多推荐了,返回首页