先看效果
image.png
id="allmap"
class="map"
ref="map"
>
import echarts from "echarts";
import "echarts/extension/bmap/bmap";
export default {
data() {
return {
chart: echarts.ECharts,
bmap: {},
mapZoom: 6,
};
},
mounted() {
this.initMap();
},
methods: {
initMap() {
this.chart = echarts.init(this.$refs.map);
this.chart.setOption({
bmap: {
center: [116.43244,39.911172],
zoom: 16,
roam: true
},
series: [
{
type: "effectScatter",
coordinateSystem: "bmap",
data: [{ name: "111", value: [116.43244,39.911172] }],
symbolSize: [20, 20],
showEffectOn: "render",
rippleEffect: {
period: 2, // 涟漪特效的动画周期
scale: 5, // 涟漪特效动画中波纹的最大缩放比例
brushType: "fill" // 涟漪特效的波纹绘制方式
},
hoverAnimation: true,
label: {
normal: {
formatter: "{b}",
show: false,
fontSize: 16,
color: "#222222",
fontWeight: "bolder",
lineHeight: 40,
position: ["200%", "200%"],
distance: 20,
align: "center",
backgroundColor: "#FFFFFF",
borderRadius: 5,
padding: 20,
shadowColor: "rgba(0,0,0,0.16)",
shadowBlur: 6,
shadowOffsetX: 0,
shadowOffsetY: 3,
width: 200
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: "#d3463e"
},
emphasis: {
color: "red"
}
},
zlevel: 1
}
]
});
// 获取百度地图实例，使用百度地图自带的控件
this.bmap = this.chart
.getModel()
.getComponent("bmap")
.getBMap();
this.bmap.setMinZoom(6); // 设置地图最小缩放比例
this.bmap.setMaxZoom(24); // 设置地图最大缩放比例
const _this = this;
// 监听地图比例缩放， 可以根据缩放等级控制某些图标的显示
this.bmap.addEventListener("zoomend", function() {
_this.mapZoom = _this.bmap.getZoom();
});
},
}
};
.content {
width: 100%;
margin-top: 8px;
height: calc(100% - 38px);
float: right;
.map {
width: 100%;
height: 100%;
float: left;
}
}
