<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=8PBGIzcngFtMIdnWIX9ZrBr2ZjWN0ejT"></script> <title>车辆运行轨迹测试</title>
</head>
<body>
<input id="allmap_value" value="" style="display:none;">
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
$(function(){
//初始化
drawGreenAddress(0,"red",4);
//show_mycat($("#allmap_value").val(),list[index].Long,list[index].Lat);
}) var timer; //定时器
var index = 0; //记录播放到第几个point
var list = [
{Long:106.652024,Lat:26.617221},
{Long:106.652886,Lat:26.614185},
{Long:106.652527,Lat:26.614314},
{Long:106.652743,Lat:26.609469},
{Long:106.654324,Lat:26.607531},
{Long:106.65612,Lat:26.602556},
];
var listLast = list.length-1;
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl({isOpen: true}));
map.centerAndZoom(new BMap.Point(list[0].Long,list[0].Lat), 15); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 setTimeout(drawIcon,500);
var carMk;
var myBeginIcon = new BMap.Icon("http://e.hiphotos.baidu.com/image/pic/item/7e3e6709c93d70cfaf72bca2f0dcd100bba12b90.jpg", new BMap.Size(25,37), {imageOffset: new BMap.Size(0, 0)});//人
var myEndIcon = new BMap.Icon("http://b.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f534c096ae8fe9925bd317dc0.jpg", new BMap.Size(25,37), {imageOffset: new BMap.Size(0, 0)});//人 //show_mycat("这里是地址",106.652024,26.617221);
//展示bd地址
var car = "";
function show_mycat(address,long,lat){ if(car) map.removeOverlay(car)
label = new BMap.Label(address, {offset: new BMap.Size(-20, -20)});
car = new BMap.Marker(new BMap.Point(long,lat));
car.setLabel(label);
map.addOverlay(car);
map.panTo(new BMap.Point(long, lat)); } //显示原始路线
function drawGreenLine(i,color,weitht){ var polyline = new BMap.Polyline([
new BMap.Point(list[i].Long,list[i].Lat),//起始点的经纬度
new BMap.Point(list[i+1].Long,list[i+1].Lat)//终点的经纬度
], {strokeColor:color,//设置颜色
strokeWeight:weitht, //宽度
strokeOpacity:1});//透明度
map.addOverlay(polyline); } //获取路线
function drawGreenAddress(i,color,weitht){ if(i%2==0){ //不能太频繁请求百度地址,这里可能会改大
var geoc = new BMap.Geocoder();
geoc.getLocation(new BMap.Point(list[i].Long,list[i].Lat),function(rs){
var addComp = rs.addressComponents;
address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
$("#allmap_value").val(address)
});
}
} function lineAddress(i,color,weitht){
drawGreenLine(i,color,weitht)
drawGreenAddress(i,color,weitht)
} function drawIcon(){
if(carMk){
map.removeOverlay(carMk);
}
carMk2 = new BMap.Marker(
new BMap.Point(list[0].Long,list[0].Lat),//起始点的经纬度
{icon:myBeginIcon});
map.addOverlay(carMk2); carMk = new BMap.Marker(
new BMap.Point(list[listLast].Long,list[listLast].Lat),//终点的经纬度
{icon:myEndIcon});
map.addOverlay(carMk); for(var i=0;i<list.length-1;i++){ drawGreenLine(i,"green",4);
} } //停止
function stop() { if(timer) {
window.clearTimeout(timer);
}
}
//运行地图轨迹
function play(){
if(index < listLast){
lineAddress(index,"red",2);
//显示地址
show_mycat($("#allmap_value").val(),list[index+1].Long,list[index+1].Lat); timer = window.setTimeout("play(" + index + ",'red',2)", 500);
index++; } } </script>
效果图
执行play() 方法可根据经纬度跑地图