【百度地图API】北京周边7日游——图标按路线轨迹行动
2011-01-14 11:01
429 查看
任务描述: 春节就要来啦~酸奶小妹的妈妈要从遥远的重庆,来到北京过春节呢!酸奶小妹忙着给妈妈计划,北京周边的旅游线路。计划好路线后,就开始驾车旅游啦~~ 如何实现: 利用百度地图API先确定几个坐标点points,把他们连成一条折线BMap.Polyline(points)。 然后,更改标注图片为一辆小车,var myIcon = new BMap.Icon("car.png",...)。 最后利用二次开发的类K_pointmover让小车沿着折线运动。 图示:
运行代码,点击这里。 代码:
运行代码,点击这里。 代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="keywords" content="百度地图,百度地图API" /> <meta name="description" content="百度地图API自定义地图,按路线行驶的小车" /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>按指定路线前进的小车</title> <script type="text/javascript" src="http://api.map.baidu.com/api?key=ea9710104e3349456b5e5d1191f2d376&v=1.1&services=true" ></script> <script type="text/javascript" src="K_PointMover.js"></script> <script type="text/javascript" src="K_Function.js"></script> </head> <body onload="onLoad()"> <div style="float:left;border:5px dashed #9df83e;"> <div style="width:520px;height:340px;border:1px solid gray" id="container"></div> <div style="display:none;"> <input type="checkBox" id="MarkerMove" checked />MarkerMove <input type="checkBox" id="MapMove" />MapMove </div> <p>北京周边一日游--请点击"开始"<input type="button" value="开始" onclick="pointMover.Move();" /></p> <p>"暂停"后,可点击小车,获取当前坐标。<input type="button" value="暂停" onclick="pointMover.Pause();" /></p> </div> </body> <script type="text/javascript"> var map = new BMap.Map("container"); // 创建map var point = new BMap.Point(116.411053,39.950507); // 确定中心点 map.centerAndZoom(point,8); // 初始化地图map,设置中心点和地图级别。 var moveMarker,pointMover; function onLoad() { var point1 = new BMap.Point(117.965625,40.962343); // 起点1 var point2 = new BMap.Point(118.213988,39.609821); // 中间点2 var point3 = new BMap.Point(117.211335,39.095608); // 中间点3 var point4 = new BMap.Point(116.723807,39.53863); // 中间点4 var point5 = new BMap.Point(116.392656,39.9080114); // 中间点5 var point6 = new BMap.Point(115.509585,38.865845); // 中间点6 var point7 = new BMap.Point(114.920872,40.829717); // 中间点7 var point8 = new BMap.Point(117.965625,40.962343); // 终点8 var points = [point1,point2,point3,point4,point5,point6,point7,point8]; //折线数组 var polyline = new BMap.Polyline(points); //创建折线 map.addOverlay(polyline); //绘制折线 var myIcon = new BMap.Icon("car.png", new BMap.Size(63, 42), { //绘制小车 offset: new BMap.Size(32, 21), // 指定定位位置 imageOffset: new BMap.Size(0,0) // 设置图片偏移 }); moveMarker = new BMap.Marker(points[0],{icon: myIcon}); map.addOverlay(moveMarker); moveMarker.addEventListener("click",function(e){ //鼠标点击获取经纬度 alert("小车的坐标为:经度"+e.point.lng+",纬度"+e.point.lat); }); pointMover = new K_PointMover(points,100,0.1,MapMove); //移动函数 } function MapMove(pointMover) { if(document.getElementById("MarkerMove").checked) moveMarker.setPoint(pointMover.point); if(document.getElementById("MapMove").checked) map.panTo(pointMover.point); } </script> </html>备注: 你可以自己定义lng()和lat(),让小车移动更加平滑。 K_pointmover类是定义了小车移动的函数;K_function是基本的一些操作。 请到这里,右键查看源码,并下载这两个K_类。
相关文章推荐
- 【百度地图API】北京周边7日游——图标按路线轨迹行动
- 【百度地图API】北京周边7日游——图标按路线轨迹行动
- 北京周边骑行路线
- 北京周边骑行路线
- 百度地图API - 行车路线 轨迹
- 百度地图API - 行车路线 轨迹
- 谷歌地图路线规划去掉自带的AB图标
- 百度地图API-自定义图标覆盖物
- 百度地图API四:实现轨迹动态回放功能
- 安卓开发笔记①:利用高德地图API进行定位、开发电子围栏、天气预报、轨迹记录、搜索周边(位置)
- 百度地图API(4):轨迹动态生成展示
- Android 百度地图之全局搜索周边搜索全国搜索城市路线规划(升级版)
- 数据挖掘:如何通过百度地图API抓取物体周边地理位置信息
- 百度地图API根据某个经纬度值(地理坐标)查询对应的地址信息以及该地址周边的POI(Point of Interest,兴趣点)信息
- 环保—北京周边 自行车骑行线路大全
- 【攻略】推荐一条骑车逛北京的路线
- 百度地图api绘制路线规划实例
- 百度地图api之换自定义标注图标
- 从天津到北京的英国签证申请中心的路线
- 北京周边-夜爬泰山