百度地图初次使用的一些方法的介绍和静态行驶轨迹，点击当前行驶路径，进行高亮显示
1、核心类 Map
方法：setViewport 根据提供的地理区域或坐标设置地图视野，调整后的视野会保证包含提供的地理区域或坐标
事件：addoverlay 当使用Map.addOverlay()方法向地图中添加单个覆盖物时会触发此事件
removeoverlay 当使用Map.removeOverlay()方法移除单个覆盖物时会触发此事件
代码实例：
var map=new BMap.Map();
var point=new BMap.Point(116.29579,39.837146);//以指定的经度和纬度创建一个地理点坐标
map.setViewport(point);// 带验证
2、静态行驶轨迹，点击当前行驶路径，进行高亮显示 代码如下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>静态行驶轨迹，点击当前行驶路径，进行高亮显示</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wIt2mDCMGWRIi2pioR8GZnfrhSKQHzLY"></script>
<script src="lodash.js"></script>
<script src="GPSTransition.js"></script>
</head>
<body>
<div>
点击第一条路径进行高亮显示 <button id="firstPath">请点击</button>
<input id="firstId" type="text" hidden value="LNBSCB3F2FD11327120190327091134" title="隐藏保存rowKey,模拟vue中的v-for渲染事件">
</div>
<div>
点击第二条路径进行高亮显示 <button id="secondPath">请点击</button>
<input id="secondId" type="text" hidden value="LNBSCB3F2FD11327120190327103555" title="隐藏保存rowKey,模拟vue中的v-for渲染事件">
</div>
<div id="mapId" style="height: 500px;">
<script>
window.viewPonit=[];// 根据提供的地理区域或坐标设置地图视野
window.polylineObj=[];
var map = new BMap.Map("mapId");
map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
var RowKeys=["LNBSCB3F2FD11327120190327091134","LNBSCB3F2FD11327120190327103555"];
// 假设下面是第一个接口中请求过来的数据:用rowKey的值来请求过来每一条轨迹的经纬度
var result={
data:{
Record:[{
RowKey:"LNBSCB3F2FD11327120190327091134"
},{
RowKey:"LNBSCB3F2FD11327120190327103555"
}]
},
errcode: "",
errmsg: "",
state: "1",
};
var sumPath=[{RowKey:"LNBSCB3F2FD11327120190327091134",point:[{Longitude: "104.074027",Latitude:"30.707441"},
{Longitude: "104.073849", Latitude:"30.707667"},
{ Longitude: "104.073439", Latitude: "30.708143"},
{ Longitude: "104.073197", Latitude: "30.708494"},
{Longitude: "104.073955", Latitude: "30.708502"},
{Longitude: "104.074909", Latitude: "30.708283"},
{Longitude: "104.075935", Latitude: "30.708124"},
{ Longitude: "104.076907", Latitude: "30.708074"},
{Longitude: "104.077134", Latitude: "30.708088"},
{Longitude: "104.077203", Latitude: "30.70822"},
{Longitude: "104.077442", Latitude: "30.708328"},
{ Longitude: "104.077563", Latitude: "30.708757"},
{ Longitude: "104.077894", Latitude: "30.709436"},
{ Longitude: "104.078166", Latitude: "30.710533"},
{Longitude: "104.078179", Latitude: "30.711313"},
{Longitude: "104.079046", Latitude: "30.711303"},
{Longitude: "104.080373", Latitude: "30.711341"},
{ Longitude: "104.083328", Latitude: "30.711724"},
{ Longitude: "104.084903", Latitude: "30.710111"},
{ Longitude: "104.085773", Latitude: "30.709084"},
{ Longitude: "104.08678", Latitude: "30.707893"},
{ Longitude: "104.08766", Latitude: "30.707396"},
{ Longitude: "104.088474", Latitude: "30.707899"},
{ Longitude: "104.089106", Latitude: "30.707373"},
{Longitude: "104.08975", Latitude: "30.706569"},
{Longitude: "104.08981", Latitude: "30.706481"},
{ Longitude: "104.089812", Latitude: "30.706463"},
{Longitude: "104.090075", Latitude: "30.706152"},
{ Longitude: "104.090405", Latitude: "30.70575"},
{Longitude: "104.090774", Latitude: "30.705382"},
{Longitude: "104.091152", Latitude: "30.705076"},
{Longitude: "104.091376", Latitude: "30.70503"},
{Longitude: "104.091513", Latitude: "30.704999"},
{Longitude: "104.092173", Latitude: "30.704499"},
{Longitude: "104.092582", Latitude: "30.704179"},
{Longitude: "104.093084", Latitude: "30.703797"},
{ Longitude: "104.092784", Latitude: "30.703114"},
{ Longitude: "104.09221", Latitude: "30.702311"},
{ Longitude: "104.091589", Latitude: "30.701418"},
{Longitude: "104.090919", Latitude: "30.70047"},
{Longitude: "104.090434", Latitude: "30.699731"},
{ Longitude: "104.089988", Latitude: "30.698918"},
{Longitude: "104.089372", Latitude: "30.698138"},
{ Longitude: "104.089149", Latitude: "30.697841"},
{Longitude: "104.089079", Latitude: "30.697768"},
{Longitude: "104.088915", Latitude: "30.697549"},
{Longitude: "104.088783", Latitude: "30.69735"},
{ Longitude: "104.088663", Latitude: "30.697095"},
{Longitude: "104.088267", Latitude: "30.696512"},
{Longitude: "104.087917", Latitude: "30.695944"},
{Longitude: "104.087736", Latitude: "30.695665"},
{Longitude: "104.087737", Latitude: "30.695664"},
{ Longitude: "104.087744", Latitude: "30.695633"},
{ Longitude: "104.087717", Latitude: "30.695646"},
{ Longitude: "104.087748", Latitude: "30.69565"},
{Longitude: "104.087794", Latitude: "30.69562"},
{ Longitude: "104.087789", Latitude: "30.695607"},
{Longitude: "104.087757", Latitude: "30.695587"},
{ Longitude: "104.087697", Latitude: "30.695522"},
{ Longitude: "104.087692", Latitude: "30.695518"},
{Longitude: "104.087691", Latitude: "30.695475"},
{ Longitude: "104.087713", Latitude: "30.695044"},
{ Longitude: "104.08747", Latitude: "30.694616"},
{ Longitude: "104.087704", Latitude: "30.694107"},
{Longitude: "104.089057", Latitude: "30.693239"},
{ Longitude: "104.090454", Latitude: "30.692497"},
{Longitude: "104.09134", Latitude: "30.692105"},
{ Longitude: "104.092401", Latitude: "30.691539"},
{ Longitude: "104.093162", Latitude: "30.690982"},
{ Longitude: "104.094377", Latitude: "30.690397"},
{ Longitude: "104.095618", Latitude: "30.689868"},
{ Longitude: "104.096944", Latitude: "30.689285"},
{Longitude: "104.098082", Latitude: "30.688697"},
{Longitude: "104.098549", Latitude: "30.688377"},
{ Longitude: "104.098841", Latitude: "30.688191"},
{ Longitude: "104.099224", Latitude: "30.687982"},
{Longitude: "104.099817", Latitude: "30.687664"},
{ Longitude: "104.100589", Latitude: "30.686974"},
{ Longitude: "104.101127", Latitude: "30.686045"},
{ Longitude: "104.101417", Latitude: "30.685347"},
{ Longitude: "104.101487", Latitude: "30.685103"},
{ Longitude: "104.101575", Latitude: "30.684841"},
{ Longitude: "104.101661", Latitude: "30.684491"},
{ Longitude: "104.101797", Latitude: "30.684086"},
{Longitude: "104.10211", Latitude: "30.683614"},
{ Longitude: "104.102555", Latitude: "30.683017"},
{ Longitude: "104.103033", Latitude: "30.682261"},
{ Longitude: "104.103687", Latitude: "30.681262"},
{ Longitude: "104.104324", Latitude: "30.680185"},
{ Longitude: "104.104847", Latitude: "30.679258"},
{ Longitude: "104.10534", Latitude: "30.678399"},
{Longitude: "104.105858", Latitude: "30.6774"},
{ Longitude: "104.106281", Latitude: "30.676203"},
{ Longitude: "104.106763", Latitude: "30.674916"},
{ Longitude: "104.107008", Latitude: "30.674346"},
{ Longitude: "104.107371", Latitude: "30.673312"},
{ Longitude: "104.107735", Latitude: "30.672597"},
{ Longitude: "104.108093", Latitude: "30.672052"},
{ Longitude: "104.108169", Latitude: "30.672066"},
{ Longitude: "104.108357", Latitude: "30.671763"},
{ Longitude: "104.108568", Latitude: "30.671393"},
{ Longitude: "104.108794", Latitude: "30.670999"},
{ Longitude: "104.109002", Latitude: "30.670466"},
{ Longitude: "104.109247", Latitude: "30.669648"},
{ Longitude: "104.109328", Latitude: "30.66947"},
{ Longitude: "104.109379", Latitude: "30.66939"},
{ Longitude: "104.109378", Latitude: "30.66935"},
{ Longitude: "104.109422", Latitude: "30.669311"},
{Longitude: "104.109464", Latitude: "30.669272"},
{ Longitude: "104.109483", Latitude: "30.669249"},
{Longitude: "104.109581", Latitude: "30.668991"},
{ Longitude: "104.109982", Latitude: "30.668202"},
{ Longitude: "104.110218", Latitude: "30.666918"},
{ Longitude: "104.11042", Latitude: "30.666081"},
{ Longitude: "104.110035", Latitude: "30.665753"},
{ Longitude: "104.109099", Latitude: "30.66555"},
{Longitude: "104.108754", Latitude: "30.665493"},
{ Longitude: "104.1087", Latitude: "30.665405"},
{Longitude: "104.108675", Latitude: "30.665402"},
{Longitude: "104.108667", Latitude: "30.665388"}]},{
RowKey:"LNBSCB3F2FD11327120190327103555",
point:[
{ Longitude: "104.108671", Latitude: "30.665446"},
{ Longitude: "104.108674", Latitude: "30.665469"},
{ Longitude: "104.108665", Latitude: "30.665504"},
{ Longitude: "104.108886", Latitude: "30.665541"},
{ Longitude: "104.109118", Latitude: "30.665525"},
{Longitude: "104.109635", Latitude: "30.665707"},
{ Longitude: "104.110082", Latitude: "30.665854"},
{ Longitude: "104.110456", Latitude: "30.665854"},
{ Longitude: "104.110713", Latitude: "30.665265"},
{ Longitude: "104.11079", Latitude: "30.665048"},
{ Longitude: "104.11084", Latitude: "30.664966"},
{ Longitude: "104.110875", Latitude: "30.664916"},
{ Longitude: "104.110878", Latitude: "30.664905"},
{ Longitude: "104.110942", Latitude: "30.664869"},
{ Longitude: "104.111039", Latitude: "30.664821"},
{ Longitude: "104.111067", Latitude: "30.664806"},
{ Longitude: "104.111104", Latitude: "30.664769"},
{ Longitude: "104.111136", Latitude: "30.664736"},
{ Longitude: "104.110996", Latitude: "30.664811"},
{ Longitude: "104.110988", Latitude: "30.6648"},
{ Longitude: "104.111038", Latitude: "30.664706"},
{ Longitude: "104.111053", Latitude: "30.664683"},
{ Longitude: "104.11132", Latitude: "30.664111"},
{ Longitude: "104.111611", Latitude: "30.663403"},
{ Longitude: "104.111665", Latitude: "30.663251"},
{ Longitude: "104.11173", Latitude: "30.663238"},
{ Longitude: "104.111794", Latitude: "30.663281"},
{ Longitude: "104.111895", Latitude: "30.663286"},
{ Longitude: "104.112526", Latitude: "30.663235"},
{ Longitude: "104.113186", Latitude: "30.663265"},
{ Longitude: "104.114061", Latitude: "30.663335"},
{ Longitude: "104.11468", Latitude: "30.663531"},
{ Longitude: "104.115255", Latitude: "30.663612"},
{Longitude: "104.11565", Latitude: "30.663767"}
]
}];
// 循环请求出来经纬度
for(var i= 0;i<result.data.Record.length;i++){
wheelPath(result.data.Record[i].RowKey,i,result.data.Record.length);
}
// 模拟接口请求，请求出来RowKey所对应的经纬度
function wheelPath(RowKey,index) {
var color=['#e4613b','#6b9519','#b2a605','#956303','#308705','#bf710d','#d74108','#b5c105','#443ad7','#35cf96','#6a0893','#3605cd',"#546215","#ae7013","#ec9a1f","#d76504","#11d5c3","#11d57a","#11d556","#14d511","#2b49db","#6a7bcf","#32395c","#563499","#7d47e6","#b42dec"]
var LngAndLat= _.filter(sumPath, { 'RowKey': RowKey });
console.log("经纬度："+JSON.stringify(LngAndLat));
drawLine(LngAndLat[0].point,RowKey,color[index]);
}
// 画出所有的轨迹
function drawLine(pointStr,RowKey,color) {
// 处理成百度地图上需要的经纬度
var pointArr = [];
for (var k = 0; k < pointStr.length; k++) {
pointArr.push({
lng: pointStr[k].Longitude,
lat: pointStr[k].Latitude
});
}
// 转成百度地图所使用的坐标点
var trackPoint = [];
var first;// 第一条数据的开始点
var last;// 最后一条数据的结束点
for (var i = 0, j = pointArr.length; i < j; i++) {
trackPoint.push(translateBD(pointArr[i].lng,pointArr[i].lat));
window.viewPonit=window.viewPonit.concat(trackPoint);// concat 既可以连接字符串又可以连接数组
}
// 高亮显示一组数据
var polyline={RowKey:RowKey,point:trackPoint};
window.polylineObj.push(polyline);
// 画线
var polyline = new BMap.Polyline(trackPoint, {
strokeColor:color,
strokeWeight: 5,
setStrokeStyle:"dashed",
strokeOpacity: 1
});
map.addOverlay(polyline);
map.centerAndZoom(window.viewPonit, 13);
}
marker();// 画起始点和终点的图标
// 转成正常经纬度
function translateBD(Latitude,Longitude){
var arr1 = GPS.gcj_encrypt(Number(Longitude), Number(Latitude));
var arr2 = GPS.bd_encrypt(arr1['lat'], arr1['lon']);
var point = new BMap.Point(arr2['lon'], arr2['lat']);
//var point = new BMap.Point(Longitude, Latitude);
return point;
}
// 开始和结束的marker
function marker(){
var firstPoint=window.polylineObj[0].point[0];
var last=window.polylineObj[window.polylineObj.length-1].point.length;
var lastPoint=window.polylineObj[window.polylineObj.length-1].point[last-1];
if(firstPoint!==""){
map.centerAndZoom(firstPoint, 13);
this.locationIcon("起点",firstPoint);
}
if(lastPoint!==""){
this.locationIcon("终点",lastPoint);
map.setViewport(window.viewPonit);// 根据提供的地理区域或坐标设置地图视野
}
}
// 创建位置图标
function locationIcon(n,point){
// 配置图片
var size = new BMap.Size(45, 45);
var offset = new BMap.Size(0, 0);
var imageSize = new BMap.Size(45, 45);
if(n=="起点"){
var iconStart = new BMap.Icon("startMap.png", size, {
imageSize: imageSize,
infoWindowAnchor:new BMap.Size(0, -3),
anchor: new BMap.Size(20, 45)
});
var markerStart = new BMap.Marker(point, {
icon: iconStart,
offset: offset
}); // 创建标注
map.addOverlay(markerStart);
}else {
var iconEnd = new BMap.Icon("endMap.png", size, {
imageSize: imageSize,
infoWindowAnchor:new BMap.Size(0, -3),
anchor: new BMap.Size(20, 45)
});
var markerEnd = new BMap.Marker(point, {
icon: iconEnd,
offset: offset
}); // 创建标注
map.addOverlay(markerEnd);
}
}
// 点击第一条路径进行高亮显示
document.getElementById("firstPath").addEventListener("click",function () {
var RowKey=document.getElementById("firstId").value;
var LightLine=_.filter(window.polylineObj,{RowKey:RowKey});
if(LightLine.length>0){
highLightLine(LightLine[0].point);
}else {
alert("该条记录没有行车轨迹！");
highLightLine([]);
}
});
// 点击第二条路径进行高亮显示
document.getElementById("secondPath").addEventListener("click",function () {
var RowKey=document.getElementById("secondId").value;
var LightLine=_.filter(window.polylineObj,{RowKey:RowKey});
if(LightLine.length>0){
highLightLine(LightLine[0].point);
}else {
alert("该条记录没有行车轨迹！");
highLightLine([]);
}
});
// 高亮色
function highLightLine(highLightPoint,pointIndex) {
// 高亮色的注释掉
var polyline = new BMap.Polyline(highLightPoint, {
strokeColor: "#a8fe22",
strokeWeight: 5,
setStrokeStyle: "dashed",
strokeOpacity: 1
});
//window.lastHighLine=highLightPoint;
// 移除上一次高亮画出的线
if (window.lastHighLine !== "") {
map.removeOverlay(window.lastHighLine);
}
map.addOverlay(polyline); //增加折线
polyline.setStrokeWeight(8);// 高亮要配和 addOverlay一起使用
window.lastHighLine = polyline;
}
</script>
</body>
</html>
文件中需要的2个js文件和2个图片
lodash文件：https://raw.githubusercontent.com/lodash/lodash/4.17.5/dist/lodash.js
GPS：https://www.cnblogs.com/ilimengyang/p/9570389.html
开始图标和结束图标：
浙公网安备 33010602011771号