Vue使用百度地图，添加线路、站点，简易封装，方便修改(vue使用百度地图实现添加多条线路、多个站点)

简介：上期介绍了如何在vue项目中，使用百度地图，这期说下如何在百度地图上添加线路和站点。

效果图如下：

1、百度地图安装设置好ak以后， 以全局安装为例，百度地图的安装设置使用，

详见上文：

vue项目中使用百度地图，详细过程_北城笑笑的博客-CSDN博客_vue使用百度地图vue项目中使用百度地图，过程详细https://blog.csdn.net/weixin_65793170/article/details/127839712?spm=1001.2014.3001.5502

2、直接在vue页面使用，配置相关属性，如下：

<baidu-map
	class="bm-view"
    :center="center"
    :zoom="zoom"
    :scroll-wheel-zoom="scrollZoom"
    NavigationControlType="BMAP_NAVIGATION_CONTROL_LARGE"
    @ready="mapReady">
    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"/>
</baidu-map>

3、定义相关数据：

  // 定义地图数据
      BMap: "",
      map: "",
      center: { lng: 118.904, lat: 31.915 },//中心坐标
      centerPoint: { lng: 118.904, lat: 31.915 },
      zoom: 11, //初始缩放比
      scrollZoom: true,//允许鼠标滚轮缩放
      //折线颜色和标注icon
      colorAndIcon: [
        { lineColor: "#b083fb", icon: require("@/assets/ccle.png") },
        { lineColor: "#b08xab", icon: require("@/assets/bus.png") },
      ],
      //线路坐标信息
      lineMapList: [],
      //站点坐标信息
      stationMapList: [],

4、初始化

    //地图默认方法
    mapReady({ BMap, map }) {
      this.BMap = BMap;
      this.map = map;

      this.drawMap();//适当地方调用

      // 点击地图添加监听事件获取经纬度
      map.addEventListener("click", (e) => {
        // console.log(e.point.lng, e.point.lat);
        //......
      });

      //给地图添加鼠标移动事件
      map.addEventListener("mousemove", (e) => {
       //......
      });

    },

5、绘制地图

    drawMap() {
      let BMap = this.BMap;
      let map = this.map;
      let data = this.lineMapList; //线路
      let data2 = this.stationMapList; //站点

      // 这里是数据改变时，地图中心点定位到当前第一条数据的第一个坐标点或者默认的中心坐标
      // let point = data.length && data[0].length ? data[0][2] : this.centerPoint;
      // this.center = { lng: point.lng, lat: point.lat };

      // 线路坐标信息 数据类型：数组包数组
      for (let i = 0; i < data.length; i++) {
        let points = [];
        for (let j = 0; j < data[i].length; j++) {
          points.push(new BMap.Point(data[i][j].lng, data[i][j].lat));
        }
        this.addPolyline(BMap, map, data, points, i);//调用添加折线方法
      }
      // 站点坐标信息 数据类型：数组包对象
      for (let i = 0; i < data2.length; i++) {
        let points = [];
        points.push(new BMap.Point(data2[i].lng, data2[i].lat));
        this.addStation(BMap, map, data2, points, i);//调用添加站点方法
      }
    },

6、添加折线

//添加折线
addPolyline(BMap, map, data, points, index) {
      let _this = this; //注意this的使用
      let polyline = "";
      // 创建折线
      polyline = new BMap.Polyline(points, {
        enableEditing: false, // 是否启用线编辑，默认为false
        // 设置折线颜色,可以设置不同颜色线路，需要自己定义
        strokeColor: this.colorAndIcon[0].lineColor, 
        strokeWeight: 9, // 折线宽度
        strokeOpacity: 1, // 折线透明度
      });
      map.addOverlay(polyline); // 将折线添加到地图
      //折线点击事件
      polyline.addEventListener("click", function (e) {
        //......
      });
      for (let j = 0; j < points.length; j++) {
        this.addMarker(
          BMap,
          map,
          new BMap.Point(data[index][j].lng, data[index][j].lat),
          j + 1,
          index
        );
      }
    },


  //添加icon和标识
   addMarker(BMap, map, point, number, index) {
      let marker = "";//线体坐标点
      let label = "";//icon上的文字
      let myIcon = new BMap.Icon(
        //也可以设置不同坐标点上的icon，需要自己定义
        this.colorAndIcon[0].icon, 
        new BMap.Size(30, 30), //图标可视区域大小
        { anchor: new BMap.Size(8, 8) } //图标定位点相对于图标左上角的偏移量
      );
      myIcon.setImageSize(new BMap.Size(15, 15)); // 设置icon大小
      marker = new BMap.Marker(point, { icon: myIcon }); // 创建图像标注
      map.addOverlay(marker); // 将标注添加到地图
      //icon标识内容位置
      label = new BMap.Label(number, { offset: new BMap.Size(3, 0) });
      // 文本标识样式
      label.setStyle({
        fontWeight: 600,
        fontSize: "8px",
        color: "white",
        backgroundColor: "0",
        border: 0,
      });
      marker.setLabel(label); // 为icon添加文本标识
    },

7、添加站点

    //站点数据处理  逻辑同上
    addStation(BMap, map, data, points, index) {
      for (let j = 0; j < points.length; j++) {
        this.addStationMarker(
          BMap,
          map,
          new BMap.Point(data[index].lng, data[index].lat),
          j + 1,
          index
        );
      }
    },
    //添加站点标注
    addStationMarker(BMap, map, point, number, index) {
      let marker = "";
      let myIcon = new BMap.Icon(
        this.colorAndIcon[1].icon,
        new BMap.Size(30, 30),
        { anchor: new BMap.Size(8, 8) }
      );
      myIcon.setImageSize(new BMap.Size(18, 18)); 
      marker = new BMap.Marker(point, { icon: myIcon }); 
      map.addOverlay(marker);
    },

创作不易，感觉有用就一键三连，点赞、收藏加关注😄