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

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

任务描述：

　　春节就要来啦~酸奶小妹的妈妈要从遥远的重庆，来到北京过春节呢！酸奶小妹忙着给妈妈计划，北京周边的旅游线路。计划好路线后，就开始驾车旅游啦~~

如何实现：

　　利用百度地图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日游——图标按路线轨迹行动相关推荐

IOS开发百度地图API入门到精通－用点生成路线，导航，气泡响应
(转)IOS开发百度地图API入门到精通-用点生成路线,导航,气泡响应 IOS百度地图API开发自定义气泡,点击气泡自动生成路线,以及拖拽 IOS百度地图开发POISearch搜索附近停车场,附近加油 ...
百度地图API:根据起始点经纬度坐标确认最佳路线规划
css样式 body, html {width: 100%;height: 100%;overflow: hidden;margin: 0;font-family: "微软雅黑"; ...
百度地图API——多点路径连线问题
本文系作者 chaoCode原创,转载请私信并在文章开头附带作者和原文地址链接. 违者,作者保留追究权利. 前言本文是对于在项目应用有遇到的多点连线问题,我的一些解决方式,以及对于之前所学习的一些百 ...
android百度地图箭头,百度地图API绘制带头箭头的折线
源代码: body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;} #l-map{height:100%;wid ...
react-native 接百度地图API（显示周边poi）
react-native 接百度地图API (显示周边poi) 目的:显示周边poi及搜索poi功能(给自己的笔记,省去了很多基础步骤,有问题的可以先去了解RN跟android以及Ios原生的通信) ...
教你用百度地图API抓取建筑物周边位置、房价信息（附代码）
来源:大数据挖掘DT数据分析本文共2465字,建议阅读5分钟. 本文为大家解读怎样用脚本与百度API的交互,爬取百度地图的数据. 需求描述对于数据挖掘工程师来说,有时候需要抓取地理位置信息,比如统 ...
基于百度地图API的微信周边搜索
这是百度LBS与微信结合的一个例子~~,已经加到功能描述:点击微信的[+]后发送[位置]给微信公众号,会返回周边信息,也可以发送[附近xxx],如[附近公交],或者自己标注百度地图,标注您的连锁点或 ...
百度地图api周边搜索功能
利用百度地图api周边搜索功能,实现点击切换周边类型显示 <!DOCTYPE html> <html lang="zh-CN"> <head>& ...
跨域请求（使用jsonp实现跨域请求）百度地图api证逆地址解析获取周边信息（pois）
新手程序员,新手博客,如果那里写的不好,还请大神们补充,指错最近项目里面需要做一个电子围栏的功能,我这边做的就是需要把商户的地址的经纬度存进数据库,本来这些从百度地图API里面有Demo可以看,但是 ...

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

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

最新文章

热门文章