百度地图 秘钥申请(AK)
百度地图 轨迹回放（一）
百度地图 轨迹回放（二）
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>轨迹回放.html</title>
<style>
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的秘钥"></script>
</head>
<body>
<div id="container"></div>
<script>
// 创建地图实例
var map = new BMap.Map("container");
// 创建点坐标
var point = new BMap.Point(112.52784132957458,26.956741622737916);
// 初始化地图，设置中心点坐标和地图级别
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.addControl(new BMap.MapTypeControl({ mapTypes: [BMAP_SATELLITE_MAP] }));// 地图类型 卫星
map.setMapType(BMAP_SATELLITE_MAP);//设置卫星地图
//获取到的坐标点
var arrPoints = [
new BMap.Point(112.65033426887469, 26.932201308996287),new BMap.Point(112.64616613130976, 26.929560168523434),
new BMap.Point(112.64228545150795, 26.92743432712639), new BMap.Point(112.63941087387695, 26.925759393261522),
new BMap.Point(112.63639256736442, 26.923375790192576), new BMap.Point(112.63380544749654, 26.921765218762054),
new BMap.Point(112.63136205651021, 26.920605592943105),new BMap.Point(112.62863120776079, 26.919381530398923),
new BMap.Point(112.6266190034191, 26.91731992103974), new BMap.Point(112.62424747687353, 26.917996390807122),
new BMap.Point(112.62245086585418, 26.917480985641845),new BMap.Point(112.62033086485133, 26.91712664321053),
new BMap.Point(112.61867798271352, 26.917931965291583),new BMap.Point(112.61693527002468,26.91905936042684),
new BMap.Point(112.61477933680145, 26.91918821011957),new BMap.Point(112.61046747035498, 26.918415109732468),
new BMap.Point(112.60780848604632, 26.918543960168762),new BMap.Point(112.6047901795338, 26.92137863214264),
new BMap.Point(112.60148441525817, 26.923118054307793),new BMap.Point(112.59767559989712,26.922602672788333),
new BMap.Point(112.59372305565452, 26.92279594113699),new BMap.Point(112.58854881591876, 26.923794488940775),
new BMap.Point(112.57841592976955, 26.930139890406817),new BMap.Point(112.57184033343869,26.93358622629276),
new BMap.Point(112.56612711039712, 26.93555091219322),new BMap.Point(112.56073727733903, 26.934616885505708),
new BMap.Point(112.55739558084301, 26.932297888887586),new BMap.Point(112.556281682011, 26.929044770736855),
new BMap.Point(112.55894066631967, 26.923375744175143),new BMap.Point(112.55840168301386, 26.920283426503516),
new BMap.Point(112.55408981656738, 26.91625684281818),new BMap.Point(112.55175422224221, 26.910973744778918),
new BMap.Point(112.55181710362788, 26.902388131399693),new BMap.Point(112.55842863217913, 26.8956867422899),
new BMap.Point(112.5672679583944, 26.889693813579093),new BMap.Point(112.57847881115522, 26.885053906157644),
new BMap.Point(112.58933034171217, 26.882540542566332),new BMap.Point(112.60370322986707, 26.88163829570166),
new BMap.Point(112.61764493137731, 26.881509402698125),new BMap.Point(112.6281371397304, 26.883120554563508),
new BMap.Point(112.62892764857891, 26.883088331753715),new BMap.Point(112.62932290300317, 26.88260498849237),
new BMap.Point(112.63007747963131, 26.88192830441639),new BMap.Point(112.63151476844679, 26.880897158902417),
new BMap.Point(112.63309578614383, 26.879930451347448),new BMap.Point(112.63708426260682, 26.87786811396665),
new BMap.Point(112.64175545125715, 26.875902413251843),new BMap.Point(112.64657036878906, 26.874838986989463),
new BMap.Point( 112.64973240418313, 26.87267987832466),new BMap.Point(112.65091816745591, 26.870617407249977),
new BMap.Point(112.65210393072869, 26.8693605702934),new BMap.Point(112.65411613507037, 26.868877167704348),
new BMap.Point(112.65648766161593, 26.868651579114676),new BMap.Point(112.66004495143427, 26.868168173462305),
new BMap.Point(112.66611749667972, 26.867426947405495),new BMap.Point(112.6709324142116, 26.86568665823492),
new BMap.Point(112.67330394075717, 26.862141541016463),new BMap.Point(112.67416631404646, 26.858080632391804),
new BMap.Point(112.6740225851649, 26.853117099547216),new BMap.Point(112.67272902523096, 26.844156398667668),
new BMap.Point(112.67186665194167, 26.827135539679343),new BMap.Point( 112.67057309200773, 26.81759241203979),
new BMap.Point(112.66453647898267, 26.81269157137199),new BMap.Point(112.64714528431524, 26.815399957164153),
new BMap.Point(112.6255859520829, 26.81630273789266),new BMap.Point( 112.60761984188927, 26.810885944506687),
new BMap.Point(112.59870865123324, 26.799793598948863),new BMap.Point(112.59252830932662, 26.781475930726824),
new BMap.Point(112.60805102853392, 26.769348506471623),new BMap.Point( 112.63162256510796, 26.757993986725698),
new BMap.Point(112.65720630602368, 26.75438094444486),new BMap.Point(112.67157919417858,26.75876819496492),
new BMap.Point(112.6827900469394, 26.7657358291653),new BMap.Point(112.68997649101685, 26.762123035719306),
new BMap.Point(112.69457581522641, 26.743541121008164),new BMap.Point(112.68681445562277,26.727537567670183),
];
var P2 = new BMap.Point(112.9388552585,27.9142801732); //终点-湘潭
var P3 = new BMap.Point(120.2346428307,30.2756456269); //终点-
var driving = new BMap.DrivingRoute(map);//创建驾车实例
driving.search(P2, P3); //第二个驾车搜索
driving.setSearchCompleteCallback(function(){
//通过驾车实例，获得一系列点的数组
var pts = driving.getResults().getPlan(0).getRoute(0).getPath();
var arrpoints = [];
// var polyline = new BMap.Polyline(pts);
// map.addOverlay(polyline)
for(let i=0;i<pts.length;i+=105){ //不能超过100个
arrpoints.push(new BMap.Point(pts[i].lng,pts[i].lat))
}
ss(arrpoints);
})
function ss(pts){
//画折线
function driveline(points) {
map.addOverlay(new BMap.Polyline(points, {
strokeColor: "black",
strokeWeight: 5,
strokeOpacity: 1
}));
}
//根据点信息实时更新地图显示范围，让轨迹完整显示。设置新的中心点和显示级别
function setZoom(bPoints) {
var view = map.getViewport(eval(bPoints));
// var mapZoom = view.zoom;
var centerPoint = view.center;
map.centerAndZoom(centerPoint, 8);
//map.centerAndZoom(bPoints,5)
//map.panTo(bPoints)
}
var i = 0,
points = [];
var mkr ='',label='';
//执行方法
function dynamicLine() {
if (i == pts.length) return; //arrPoints
if(mkr != ''){
mkr.remove();
//label.remove();
}
var myIcon = new BMap.Icon("./img/car.png",new BMap.Size(30, 30))
mkr = new BMap.Marker(pts[i]);
mkr.setIcon(myIcon);
map.addOverlay(mkr); //标点
// label = new BMap.Label(i, { //arrPoints[i].lng
// offset: new BMap.Size(20, -10)
// });
// mkr.setLabel(label);
points.push(pts[i]);
setZoom(points)
driveline(points);//画线
i++;
setTimeout(dynamicLine, 10);
}
dynamicLine()
}
map.addEventListener("click",function(e){
console.log(e.point)
var mkr = new BMap.Marker(e.point);
map.addOverlay(mkr); //标点
var label = new BMap.Label("点击", {
offset: new BMap.Size(20, -10)
})
mkr.setLabel(label);
map.addOverlay(label);
})
</script>
</body>
</html>
效果
382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
