<ve-bmap>关于事件绑定以及实现百度地图小窗
来源：8-18 销售大盘+用户增长+热门搜索API对接
qq_Seethesun_0
2020-07-07
在用过程中想要绑定事件实现下列效果
// 获取百度地图实例，使用百度地图自带的控件
var bmap = chart.getModel().getComponent(‘bmap’).getBMap();
bmap.addControl(new BMap.MapTypeControl());
报找不到 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>
写回答
2回答
-
同学你好，你可以按照下面修改一下代码。查看一下效果。
<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>如果帮助到了你，欢迎采纳！
012020-07-08 -
扬_灵
2020-07-08
同学你好，这个chart代表的是echarts，你可以将完整代码发一下，我在本地帮你定位一下问题，如果不能解决你的问题，可以继续追问。
022020-07-08
相似问题