原文:
【百度地图API】北京周边7日游——图标按路线轨迹行动
任务描述:
春节就要来啦~酸奶小妹的妈妈要从遥远的重庆,来到北京过春节呢!酸奶小妹忙着给妈妈计划,北京周边的旅游线路。计划好路线后,就开始驾车旅游啦~~
如何实现:
利用百度地图API先确定几个坐标点points,把他们连成一条折线BMap.Polyline(points)。
然后,更改标注图片为一辆小车,var myIcon = new BMap.Icon("car.png",...)。
最后利用二次开发的类K_pointmover让小车沿着折线运动。
图示:
![【百度地图API】北京周边7日游——图标按路线轨迹行动](http://img.e-com-net.com/image/product/2b06206e71274c49975314a513656304.jpg)
运行代码,点击这里。
代码:
<!
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_类。