<ve-bmap>关于事件绑定以及实现百度地图小窗

Question

在用过程中想要绑定事件实现下列效果

// 获取百度地图实例，使用百度地图自带的控件
var bmap = chart.getModel().getComponent(‘bmap’).getBMap();
bmap.addControl(new BMap.MapTypeControl());

https://github.com/apache/incubator-echarts/tree/master/extension/bmap#使用

报找不到 chart
那这个chart 是代表什么，
不知道如何下手。代码这样写法对吗

<template>
  <div class="boxwrap">
    <div class="alarm-record">
      <div class="header">
        <img class="header-img" src="../../assets/record.png" />
        <div class="header-title">全国设备分布图</div>
      </div>
      <ve-bmap
        :settings="chartSettings"
        :title="title"
        :tooltip="{}"
        :series="chartSeries"
        :events="chartEvents"
        height="100%"
      ></ve-bmap>
    </div>
    <div class="angle angle-left-top"></div>
    <div class="angle angle-left-bottom"></div>
    <div class="angle angle-right-top"></div>
    <div class="angle angle-right-bottom"></div>
  </div>
</template>

<script>
import "echarts/extension/bmap/bmap";

// 本地数据
const data = [
  { name: "北京", value: 79 },
  { name: "徐州", value: 79 },
  { name: "衡水", value: 80 },
  { name: "包头", value: 80 },
  { name: "绵阳", value: 80 },
  { name: "乌鲁木齐", value: 84 },
  { name: "枣庄", value: 84 },
  { name: "杭州", value: 84 },
  { name: "淄博", value: 85 },
  { name: "鞍山", value: 86 },
  { name: "溧阳", value: 86 },
  { name: "库尔勒", value: 86 },
  { name: "安阳", value: 90 },
  { name: "开封", value: 90 },
  { name: "济南", value: 92 },
  { name: "德阳", value: 93 },
  { name: "温州", value: 95 }
];
const geoCoordMap = {
  北京: [116.46, 39.92],
  徐州: [117.2, 34.26],
  衡水: [115.72, 37.72],
  包头: [110, 40.58],
  绵阳: [104.73, 31.48],
  乌鲁木齐: [87.68, 43.77],
  枣庄: [117.57, 34.86],
  杭州: [120.19, 30.26],
  淄博: [118.05, 36.78],
  鞍山: [122.85, 41.12],
  溧阳: [119.48, 31.43],
  库尔勒: [86.06, 41.68],
  安阳: [114.35, 36.1],
  开封: [114.35, 34.79],
  济南: [117, 36.65],
  德阳: [104.37, 31.13],
  温州: [120.65, 28.01]
};
// 本地方式
const convertData = function(data) {
  const res = [];
  data.forEach(item => {
    const { name, value } = item;
    const coord = geoCoordMap[name];
    res.push({
      name,
      value: [...coord, value]
    });
  });
  return res;
};

/* eslint-disable */
export default {
  // mixins: [commonDataMixin],

  data() {
    var self = this;
    this.chartEvents = {
      click: function(e) {
        self.name = e.name;
        console.log(e);

        var bmap = echarts
          .getModel()
          .getComponent("bmap")
          .getBMap();

        var opts = {
          width: 250, // 信息窗口宽度
          height: 100, // 信息窗口高度
          title: "标题" // 信息窗口标题
        };
        var infoWindow = new BMapGL.InfoWindow("内容", opts); // 创建信息窗口对象
        bmap.openInfoWindow(infoWindow, point); // 打开信息窗口
      }
    };
    return {
      title: {
        text: "物联网",
        subtext: "设备统计",
        left: "center"
      },
      chartSettings: {
        key: "G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb",
        bmap: {
          center: [120.65, 28.01],
          zoom: 8,
          roam: true,
          mapStyle: {}
        }
      },
      chartSeries: [
        {
          name: "故障设备",
          type: "scatter",
          symbol: "pin",
          coordinateSystem: "bmap",
          data: convertData(data, geoCoordMap),
          encode: {
            value: 2
          },
          itemStyle: {
            color: "purple"
          },
          symbolSize: function(val) {
            return val[2] / 2;
          },
          label: {
            show: false,
            position: "right",
            formatter: function(v) {
              return `${v.data.name} - ${v.data.value[2]}`;
            }
          },
          emphasis: {
            label: {
              show: true
            }
          }
        }
      ]
    };
  },
  methods: {
    clickPoint: function() {
      console.log("组件中methods方法");
    }
  }
};
</script>

<style lang="less" scoped>
.boxwrap {
  width: 100%;
  height: 100%;
  position: relative;
  .angle {
    position: absolute;
    width: 20px;
    height: 20px;
  }

  .angle-left-top {
    top: -2px;
    left: -2px;
    border-left: 6px solid rgb(71, 136, 251);
    border-top: 6px solid rgb(71, 136, 251);
  }

  .angle-right-top {
    top: -2px;
    right: -2px;
    border-right: 6px solid rgb(71, 136, 251);
    border-top: 6px solid rgb(71, 136, 251);
  }

  .angle-left-bottom {
    bottom: -2px;
    left: -2px;
    border-bottom: 6px solid rgb(71, 136, 251);
    border-left: 6px solid rgb(71, 136, 251);
  }

  .angle-right-bottom {
    bottom: -2px;
    right: -2px;
    border-right: 6px solid rgb(71, 136, 251);
    border-bottom: 6px solid rgb(71, 136, 251);
  }
}
.alarm-record {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  box-shadow: 0 2px 8px rgba(71, 136, 251, 0.3),
    0 2px 8px rgba(71, 136, 251, 0.3), 0 2px 8px rgba(71, 136, 251, 0.3),
    0 2px 8px rgba(71, 136, 251, 0.3);
}
.header {
  height: 40px;
  width: 180px;
  position: absolute;
  z-index: 10;
  border: 2px solid #2c58a6;
  border-radius: 75px;
  margin-top: -25px;
  align-self: center;
  display: flex;
  align-items: center;
  justify-items: center;
  justify-content: center;
  background-color: #2c58a6;
  .header-img {
    width: 32px;
    height: 32px;
  }
  .header-title {
    color: #fff;
  }
}
</style>

Answer 1

扬_灵 2020-07-08 14:27:48

同学你好，你可以按照下面修改一下代码。查看一下效果。

<ve-bmap
    :settings="chartSettings"
    :title="title"
    :tooltip="{}"
    @ready="clickPoint"
    :series="chartSeries"
    :events="chartEvents"
    height="100%"
></ve-bmap>

<script>
import 'echarts/extension/bmap/bmap'
/* eslint-disable */
export default {
data() {
    var self = this
    this.chartEvents = {
        click: function(e) {
            self.name = e.name
            var bmap = self.myChart
            .getModel()
            .getComponent('bmap')
            .getBMap()
            var opts = {
            width: 250, // 信息窗口宽度
            height: 100, // 信息窗口高度
            title: '标题' // 信息窗口标题
            }
            var infoWindow = new BMap.InfoWindow('内容', opts) // 创建信息窗口对象
            bmap.openInfoWindow(infoWindow, new BMap.Point(116.404, 39.915)) // 打开信息窗口
        }
    }
    return {
        myChart: ''
    }
},
methods: {
    clickPoint: function(e) {
    //想要获取百度地图实例，使用百度地图自带的控件
    //必须echarts先执行setOption后才能获取到getModel().getComponent('bmap').getBMap(）    // 但是在v-charts中没有setOption方法提供了ready方法（图表渲染完成后触发，每次渲染都会触发一次）
    // 所以在这里先将echarts的事例存储一下
     this.myChart = e
    }
}
}
</script>

如果帮助到了你，欢迎采纳！

• 提问者 qq_Seethesun_0 #1

  可以的，我看错了

Answer 2

扬_灵 2020-07-08 10:46:42

同学你好，这个chart代表的是echarts，你可以将完整代码发一下，我在本地帮你定位一下问题，如果不能解决你的问题，可以继续追问。

• 提问者 qq_Seethesun_0 #1

  我重新编辑 把代码放上去了

• 提问者 qq_Seethesun_0 #2

  其实我就是想要一个关于 ve-bmap使用 百度地图 点击图标弹个窗口的操作。但是找不到响应的文档和使用案例。虽然有百度地图原生的api文档方法。但是不知道如何下手