vue-baidu-map插件中bm-marker组件嵌套bm-info-window组件使用,在地图上生成多个点

template:

 markers: [
        {
          lng: 113.001546,
          lat: 28.20648,
          name: "测试矛盾111",
          showFlag: false //flag放在每一条数据里
        },
        {
          lng: 113.001546,
          lat: 27.20648,
          name: "测试矛盾112",
          showFlag: false
        }
      ],

data:

 markers: [
        {
          lng: 113.001546,
          lat: 28.20648,
          name: "测试矛盾111",
          showFlag: false //flag放在每一条数据里
        },
        {
          lng: 113.001546,
          lat: 27.20648,
          name: "测试矛盾112",
          showFlag: false
        }
      ]

method:

  // 点击点坐标赋值
    lookDetail(marker) {
      marker.showFlag = true;
      this.infoWindow.info = marker;
    },
    // 关闭弹窗
    infoWindowClose(marker) {
      marker.showFlag = false;
    },
    // 打开弹窗
    infoWindowOpen(marker) {
      marker.showFlag = true;
    },

3. 使用 <bm-label> 点位置添加标注

<bm-marker>
  <bm-label
    content="1"
    :labelStyle="{color: '#fff', fontSize : '12px',background:'rgba(0, 0, 0, 0)',borderColor:'rgba(0, 0, 0, 0)'}"
    :offset="{width: 4,height:2 }"
  />
</bm-marker>

猜你喜欢

转载自blog.csdn.net/qq_40999917/article/details/107642872
BM