【百度地图】路书轨迹显示

通过后端返回的坐标点列表，然后在地图上展示出轨迹，并且显示标点和显示窗口文案。效果如下

在这里插入图片描述

引入百度地图，因为百度地图的轨迹（路书）模式只能是3.0才可以使用，所以注意自己引入的是否正确

<script src="//api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
<script type="text/javascript" src="//api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>

先获取到gps坐标点列表(模拟数据)

let data = [
    {
    
    longitude: 116.380571, latitude: 39.913365},
    {
    
    longitude: 116.384452, latitude: 39.91342},
    {
    
    longitude: 116.398035, latitude: 39.91378}
]

先创建地图

var map = new BMap.Map('map');
map.enableScrollWheelZoom();
map.centerAndZoom(new BMap.Point(116.398035,39.91378), 16);

一、直接展示路书轨迹

添加标点

//正常来说我这里使用的应该是上面数组的数据，然后获取数组最后一组坐标点来进行标点的
//var point = new BMap.Point(data[data.length-1].longitude,data[data.length-1].latitude);
//添加标点
var myIcon = new BMap.Icon('/jsdemo/img/car.png', new BMap.Size(60, 40));
var point = new BMap.Point(116.398035,39.91378);
var marker = new BMap.Marker(point,{
    
    icon:myIcon})

给每一个标点添加数据，可以在点击标点的方法获取的数据里面可以获取到相对应的添加的数据

marker.customData = {
    
    'id':id } // 添加标点数据

添加轨迹路线。先要更加返回的坐标数组，先对坐标点进行初始化，然后在渲染。下面还有具体new BMap.Polyline的属性配置

if (data.length > 0) {
    
    
    var path = []
    for (var j = 0; j < data.length; j++) {
    
    
          path.push(
            new BMap.Point(data[j].longitude, data[j].latitude)
          )
        }
    }
    // console.log(path);
    var polyline =new BMap.Polyline(path, {
    
    
    enableEditing: false,//是否启用线编辑，默认为false
    enableClicking: true,//是否响应点击事件，默认为true
    icons:[icons],
    strokeWeight:'8',//折线的宽度，以像素为单位
    strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
        
    //我是根据不同的状态显示不同的折线颜色。具体的看个人需求
    strokeColor:[0].includes(personInfo.status) ? "#2867F4":'red', 
});

往地图添加标点和路书

map.addOverlay(polyline); //添加轨迹
map.addOverlay(marker); // 添加标点

给路书轨迹的线添加箭头

var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
    
    
    scale: 0.6,//图标缩放大小
    strokeColor: '#fff',//设置矢量图标的线填充颜色
    strokeWeight: '2',//设置线宽
});
var icons = new BMap.IconSequence(sy, '100%', '10%');

二、以上是直接展示路书轨迹的，我们也可以结合标点点击方法来实现点击标点来展示路书轨迹

marker.addEventListener("click", function(e){
    
    
    //这就是自己定义的方法。用来展示路书轨迹的，具体看个人需求
   that.vivwPolyline(e);            
});

三、添加自定义信息窗口

var opts = {
    
    
    width: 350,
    height: 450,
    offset: new BMap.Size(233, 210), //设置窗口移量
    // title: '故宫博物院'
};
// console.log(data);
var point = new BMap.Point( data[data.length-1].longitude,data[data.length-1].latitude);
var html = ''
html += '<div class="info-window"><div>'
var infoWindow = new BMap.InfoWindow(html, opts);
// 点标记添加点击事件
this.map.openInfoWindow(infoWindow, point); // 开启信息窗口

四、添加自定义标点label

var html = "<span class='mapSosLabel'>SOS!</span>"
var label = new BMap.Label(html, {
    
     offset: new BMap.Size(-7, 30) });
label.setStyle({
    
    
  color: "red",
  fontSize: "20px",
  fontFamily: "微软雅黑",
  padding: "5px 10px",
  borderWidth: 1,
  borderLeft:'none',
  backgroundColor:'transparent',
  border:'none',
  zIndex:'-5',
  textOverflow:'ellipsis',
  overflow:'hidden',
});
marker.setLabel(label);

五、根据坐标点来获取具体的地址信息。这个功能百度地图没有具体的api，只能结合地图的来进行使用

var myGeo = new BMap.Geocoder({
    
    extensions_town: true});      
// 根据坐标得到地址描述    
myGeo.getLocation(new BMap.Point(data[data.length-1].longitude,data[data.length-1].latitude), function(result){
    
          
  if (result){
    
      
    that.address = result.address;
  }      
});

以上就是一个完整的常用的列表，看各位具体需要来添加不同的功能使用。