【无标题】vue-baidu-map 数据改变页面重新渲染

安装

NPM

npm install vue-baidu-map --save

CDN

<script src="https://unpkg.com/vue-baidu-map"></script>

全局注册

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY'
})

页面使用

<template>
  <baidu-map
    id="allmap"
    :scroll-wheel-zoom="true"
    @ready="handler"
    :mapStyle="mapStyle"
    :zoom="zoom"
  >
  </baidu-map>
</template>

export default {
  components: {},
  props: {
    list: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      zoom: 16,
      point: "",
      mapStyle: {
        styleJson: [
          {
            featureType: "water",
            elementType: "geometry",
            stylers: {
              color: "#20ab6a",
            },
          },
        ],
      },
      maskIcon: require("@/icons/svg/car.svg"),
      mapData: {
        circle: [
          {
            polygons: [],
          },
        ],
        marker: [
          {
            name: "微站PM2.5",
            value: 37,
            lon: 118.32861,
            lat: 34.95277,
          },
          {
            name: "微站PM10",
            value: 45,
            lon: 118.31861,
            lat: 34.94277,
          },
        ],
        polygon: [
          {
            name: "一号炉",
            center: {
              lon: 118.32717,
              lat: 34.95246,
            },
            polygons: [
              {
                lon: 118.33027,
                lat: 34.95416,
              },
              {
                lon: 118.32472,
                lat: 34.95416,
              },
              {
                lon: 118.32444,
                lat: 34.95027,
              },
              {
                lon: 118.32916,
                lat: 34.95138,
              },
            ],
          },
          {
            name: "二号炉",
            center: {
              lon: 118.31701,
              lat: 34.94267,
            },
            polygons: [
              {
                lon: 118.32027,
                lat: 34.94416,
              },
              {
                lon: 118.31472,
                lat: 34.94416,
              },
              {
                lon: 118.31444,
                lat: 34.94027,
              },
              {
                lon: 118.31916,
                lat: 34.94138,
              },
            ],
          },
        ],
      },
      markdata: [],
      BMap: null,
      map: null,
    };
  },
  watch: {
    list: {
      deep: true,
      handler: function () {
        this.$nextTick(() => {
          this.map_handler();
        });
      },
    },
  },
  methods: {
    getRandomColor() {
      return (
        "#" +
        ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(
          -6
        )
      );
    },
    map_handler() {
      // console.log(this.list);
      let BMap = this.BMap;
      let map = this.map;
      this.list.map((item) => {
        this.mapData.marker.push(item);
        this.mapData.circle[0].polygons.push(item);
      });
      this.$nextTick(() => {
        this.handler({ BMap, map });
      });
    },
    handler({ BMap, map }) {
        //将@ready方法中自带的参数赋值给data中的变量以便在其他地方调用
      this.BMap = BMap;
      this.map = map;
      // console.log(this.mapData.marker, "marker");
      this.point = new BMap.Point(118.32861, 34.95277); // 默认展位置
      map.centerAndZoom(this.point, 15); // 默认层级
      map.enableDoubleClickZoom(); // 双击放大视图
      map.enableScrollWheelZoom(); // 滚轮缩放视图
      map.setMapType(BMAP_SATELLITE_MAP); // 自定义模式
        //画圆
      this.mapData.circle.map((item) => {
        let polygonColor = this.getRandomColor();
        item.polygons.map((items) => {
          var circle = new BMap.Circle(
            new BMap.Point(items.lon, items.lat),
            100,
            {
              strokeColor: polygonColor,
              strokeWeight: 1.5,
              strokeOpacity: 1,
              fillOpacity: 0.1,
              // strokeBorder: "1px solid red",
              // strokeBackgroundColor: "blue",
            }
          );
          map.addOverlay(circle);
        });
      });
      this.mapData.polygon.map((item) => {
        let arr = [];
        let polygonColor = this.getRandomColor();
        item.polygons.map((items) => {
          arr.push(new BMap.Point(items.lon, items.lat));
        });
        let polygon = new BMap.Polygon(arr, {
          strokeColor: polygonColor,
          strokeWeight: 1.5,
          strokeOpacity: 1,
          fillOpacity: 0.1,
        });
        map.addOverlay(polygon);

        let tagMarkerIcon = new BMap.Icon(
          "http://lbsyun.baidu.com/jsdemo/img/fox.gif",
          new BMap.Size(23, 25),
          {
            imageOffset: new BMap.Size(10, 0 - 13 * 25), // 设置图片偏移
          }
        );
        let marker = new BMap.Marker(
          new BMap.Point(item.center.lon, item.center.lat),
          {
            icon: tagMarkerIcon,
          }
        );
        let label = new BMap.Label(item.name, {
          offset: new BMap.Size(-15, 2),
        });
        marker.setLabel(label);
        label.setStyle({
          color: polygonColor,
          fontSize: "20px",
          backgroundColor: "0.05",
          border: "0",
          fontWeight: "bold",
        });
        marker.setLabel(label);
        map.addOverlay(marker); // 将标记点添加到地图中
      });

      this.mapData.marker.map((item) => {
        /*
         * 生成多个节点，节点提示创建
         * 多个节点提示样式设置
         */
        let marker = new BMap.Marker(new BMap.Point(item.lon, item.lat));
        let label = new BMap.Label(`${item.name}：${item.value}`, {
          offset: new BMap.Size(-20, -30),
        });

        marker.setLabel(label);
        label.setStyle({
          color: "#05f0fb",
          fontSize: "0.8vw",
          backgroundColor: "#00124B",
          border: "0",
          fontWeight: "bold",
          padding: "3px 5px",
        });
        map.addOverlay(marker); // 将标记点添加到地图中
      });
    },
  },
};