VUE百度地图一进入所有红点都显示操作

下面是显示图：

左边是策展的名字 一进入页面就会把所有测站的坐标红点标记在页面上，点击会显示弹框测站的名字。
也可以单独点击左边测站的名字，地图红点会自动定位到地图相应的位置，点击后也会弹出弹框。

<!--实时数据-地图-->
<template>
  <div class="border">
  //element的树形菜单
    <div class="tree">
      <el-tree :data="datatree" :props="defaultProps" node-key="id" ref="tree" @node-click="handleCheck"> </el-tree>
    </div>
    //下面是地图
    <div style="width: 80%; margin-top: 0; height: 820px; float: left">
 <baidu-map class="map" :center="{ lng: 116.11, lat: 39.36}" :zoom="zoom" scroll-wheel-zoom>
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
        <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
        <bm-map-type
                :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
                anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        ></bm-map-type>
        //一定要循环 给他个：key才不会报错  i是变量的次数
        <p v-for="(item,i) in center" :key="i" >  
        <bm-marker :position=" {lng: item.lat , lat: item.lng } " @click="infoWindowOpen(item,i)">
          <bm-info-window :show="showzyb[i]" @close="infoWindowClose(i)"> <div>{{SCName}}</div> </bm-info-window>
        </bm-marker>
        </p>
      </baidu-map>
    </div>
  </div>
</template>

<script>
  export default {
    name: "map",
    data(){
      return{
        zoom: 15,
        show: false,
        showzyb: [false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false],
        label: '1111',
        SCName: '123',
        userid: '',
        token: '',
        ip: '',
        tableData: [],
        center: {
          lng: 39.36,
          lat: 118.11,
        },
        queryParam: [],
        datatree: [],
        //树形图，下面的`label`是想显示那个就写那个我后台传过来的name
        defaultProps: {
          children: 'children',
          label: 'name',
        },
        txt:[{lng: 39.36,lat: 118.11},{lng: 39,lat: 118}],
      }
    },
    mounted() {
      this.ip = localStorage.getItem('IP');
      this.token = localStorage.getItem('TOKEN');//获取缓存token
      this.userid = localStorage.getItem('USERID');
      this.tree()
      this.Hongdian()
       
    },
    methods:{
      tree() { //左侧树形菜单接口
        this.axios({
          method: 'get',
          url: this.ip + '',
            headers: {"Authorization": this.token},
        })
                .then((res) => {
                  this.datatree = res.data.data
                })
                .catch((err) => {
                  console.log(err)
                })
      },
      Hongdian(){
         this.axios({ //一进入页面 取经度和纬度最后`this.center`的数据也是跟最后一张图片一样
          method: 'get',
          url:this.ip+'',
           headers: {"Authorization": this.token},
        })
                .then((res) => {
                  let zu = [];
                  for (let i = 0; i < res.data.data.length; i++) {
                   this.center.lat = res.data.data[i].lat
                   this.center.lng = res.data.data[i].lon
                    zu.push({
                      lat:this.center.lat,
                      lng:this.center.lng,
                      name:res.data.data[i].name
                    })
                  }
                  this.center=zu
                  console.log(this.center)
                })
                .catch((err) => {
                  console.log(err)
                })
      },
      //点击树形菜单时发生的事件
      handleCheck(data) {
        this.show = false
        this.SCName = data.name
        this.center = [{lng: data.lon,lat: data.lat}]
        this.$forceUpdate()
      },
      //点击红点时发生的事件
      infoWindowOpen(cs1,cs2) {
        this.show = true
        this.showzyb[cs2] = true
        this.SCName = cs1.name
      },
      handleGet(scope){
        console.log(scope)

      },
      //关闭弹出框
      infoWindowClose(cs1) {
        this.show = false
        this.showzyb[cs1] = false

      },
      onExpand(expandedKeys) {
        console.log('onExpand', expandedKeys)
        this.expandedKeys = expandedKeys
        this.autoExpandParent = false
      },
      onCheck(checkedKeys) {
        console.log('onCheck', checkedKeys)
        this.checkedKeys = checkedKeys
      },
      onSelect(selectedKeys, info) {
        console.log('onSelect', info)
        this.selectedKeys = selectedKeys
      },
    }
  }
</script>

<style scoped>
  .border {
    padding: 0;
  }

  .map {
    width: 100%;
    height: 100%;
    margin-right: 0;
    float: left;
    margin-top: 0;
  }

  .tree {
    width: 13%;
    float: left;
    height: 600px;
  }
  .el-tree {
    position: relative;
    cursor: default;
    background: transparent;
    /*color: #FFFFFF;*/
  }
</style>

下面是cs1的数据