百度地图开发文档 lbsyun.baidu.com/index.php?t…

基本的使用

先在html引入外链

然后去百度地图开放平台申请一个密钥，具体的申请流程可以看这篇文章lbsyun.baidu.com/index.php?t…

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script>
<noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
</noscript>

在具体页面中的使用

<div id="containerMap"></div>


    //初始化地图
    setMap() {
      this.map = new BMap.Map("containerMap");
      var point = new BMap.Point(113.481039, 22.565793);
      this.map.centerAndZoom(point, 13);
      this.map.enableScrollWheelZoom(); // 启用滚轮放大缩小
    },
    
//容器需要设置高度
#containerMap {
  width: 100%;
  height: calc(100vh - 90px);
}

这样一个基本的地图就能显示出来了

进阶使用

自定义标注和文本的运用

如上图所示，需要把图标回显到对应的点位上

思路：获取请求的列表，这里需要对数据做一下处理，把经纬度相同的放一块，处理完后得到了zb数组（往下看代码）。 然后就可以对zb数组进行遍历了，根据它不同的状态设置不同的图标，并根据数组的长度显示他的个数。

//获取地图列表
    getList() {
      this.$axios({
        url: "carParking/mapList",
        method: "GET",
        params: {
          parkingName: this.search_content,
          statusList: this.checkList.toString(),
        },
      })
        .then((res) => {
            this.mapList = JSON.parse(JSON.stringify(res.data));
            this.setIcon(this.mapList);
        })
        .catch((err) => {});
    },
        // 设置图标
    setIcon(arr) {
      // console.log('arr',arr);
      let list = [];
      let strlist = [];
      for (let item of arr) {
        if (item.latitude && item.longitude) {
          strlist.push(item.latitude + "," + item.longitude);
          list.push({
            str: item.latitude + "," + item.longitude,
            data: item,
          });
        }
      }
      //拿出所有有参数的坐标
      strlist = new Set(strlist);
      let zb = [];
      for (let item of strlist) {
        zb.push({
          latitude: item.split(",")[0],
          longitude: item.split(",")[1],
          data: list.filter((res) => {
            return res.str == item;
          }),
        });
      }
      this.map.clearOverlays();
      zb.forEach((item) => {
        // console.log("item", item);
        let point = new BMap.Point(item.longitude, item.latitude);
        let marker = null;
        let label = null;
        let img = null;
        img =
          item.data[0].data.status == 1
            ? require("@/assets/image/carMap/非闲置-大.png")
            : item.data[0].data.status == 2
            ? require("@/assets/image/carMap/闲置-大.png")
            : require("@/assets/image/carMap/已注销-大.png");

        var myIcon = new BMap.Icon(img, new BMap.Size(58, 56));
        //设置文字
        label = new BMap.Label(item.data.length, {
          position: point,
          offset: new BMap.Size(-10, -12),
        });
        label.setStyle({
          color: "white",
          border: "none",
          background: "none",
          fontSize: "14px",
          fontFamily: "微软雅黑",
          borderRadius: "50%",
          textAlign: "center",
          width: "18px",
          height: "18px",
        });
        marker = new BMap.Marker(point, {
          icon: myIcon,
        });

        this.map.addOverlay(marker);
        this.map.addOverlay(label);
        // // 标注的点击事件
        marker.addEventListener("click", (e) => {
          this.getDetail(item);
        });
      });
    },