百度地图——多点标记及路线

文档

申请秘钥，index.html中引入js文件

<script
      type="text/javascript"
      src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=OAl2SfB2f5hno9f8xNoglMMcRP3j4ty4"
    >
</script>

实现多点标记及对应文本标记，显示步行路线

+

• map组件

<template>
  <div class="w100 h100" ref="mapBox"></div>
</template>

<script>
export default {
  data() {
    return {
      map: "",
    };
  },
  props: {
    markerArr: {
      type: Array,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return [
          {
            lable: "开福区3号",
            point: [112.993921, 28.258375],
          },
          {
            lable: "开福区3号111",
            point: [112.993023, 28.257182],
          },
        ];
      },
    },
    // 1 显示点  2 显示路线
    type: {
      type: Number,
      default: 2,
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 展示地图
      this.map = new BMapGL.Map(this.$refs.mapBox); // 创建地图实例
      var center = new BMapGL.Point(112.991735, 28.26299); // 创建点坐标
      this.map.centerAndZoom(center, 15); // 初始化地图，设置中心点坐标和地图级别
      this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

      //  添加标注点
      var point = new Array(); //存放标注点经纬信息的数组
      var marker = new Array(); //存放标注点对象的数组
      var label = new Array(); //存放提示信息窗口对象的数组
      this.markerArr.forEach((item, i) => {
        point[i] = new BMapGL.Point(item.point[0], item.point[1]);
        marker[i] = new BMapGL.Marker(point[i]);
        this.map.addOverlay(marker[i]);
        // 创建文本标注
        label[i] = new BMapGL.Label(this.markerArr[i].lable, {
          position: point[i], // 设置标注的地理位置
          offset: new BMapGL.Size(-40, -40), // 设置标注的偏移量
        });
        this.map.addOverlay(label[i]); // 将标注添加到地图中

        // 设置label的样式
        label[i].setStyle({
          color: "#000",
          fontSize: "14px",
          border: "none",
          background: "transparent",
        });

        // 步行路线规划
        if (this.type == 2) {
          var walking = new BMapGL.WalkingRoute(this.map, {
            renderOptions: { map: this.map, autoViewport: true },
          });
          walking.search(point[0], point[1]);
        }

        // 点击标注点事件
        // marker[i].addEventListener("click", function () {
        //   alert("您点击了标注" + i);
        // });
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>