Vue2.6+Echarts+Bmap构建地图
在你的页面中引入 你的echarts库中的bmap库
js
// 引入依赖库 在echarts中使用bmap进行创建地图
import "echarts/extension/bmap/bmap"
然后直接开始写你的地图组件 搭建页面
vue
<template>
<div class="wrapper">
<div class="echarts" id="charts"></div>
</div>
</template>
<script>
// 引入依赖库 在echarts中使用bmap进行创建地图
import "echarts/extension/bmap/bmap"
export default {
name: '',
components: {},
data: () => {
return {
opstion: {}
}
},
mounted() {
this.isShowcharts()
},
methods: {
isShowcharts() {
const charts = this.$echarts.init(document.getElementById("charts"));
const opstion = {
bmap: {
key: 'G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb',
center: [104.114129, 37.550339],
zoom: 5,
roam: false,
//地图样式库
mapStyle: {
styleJson: [{
'featureType': 'water',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'land',
'elementType': 'all',
'stylers': {
'color': '#f3f3f3'
}
}, {
'featureType': 'railway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'highway',
'elementType': 'all',
'stylers': {
'color': '#fdfdfd'
}
}, {
'featureType': 'highway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'arterial',
'elementType': 'geometry',
'stylers': {
'color': '#fefefe'
}
}, {
'featureType': 'arterial',
'elementType': 'geometry.fill',
'stylers': {
'color': '#fefefe'
}
}, {
'featureType': 'poi',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'green',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'subway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'manmade',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'local',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'arterial',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'boundary',
'elementType': 'all',
'stylers': {
'color': '#fefefe'
}
}, {
'featureType': 'building',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'label',
'elementType': 'labels.text.fill',
'stylers': {
'color': '#999999'
}
}]
}
}
}
charts.setOption(opstion)
},
}
};
</script>
<style scoped>
.wrapper {
width: 100vw;
height: 100vh;
background-color: antiquewhite;
}
.echarts {
width: 100%;
height: 100%;
}
</style>
建议不要使用v-charts 有bug我就是先用的v-charts 然后改成echarts的
另外如果你用了bmap去构建你的地图也就是用百度地图去写地图你需要在你的index.html文件中引入 百度api2.0
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
要不然你的echarts地图无法构建 remember is 2.0 别搞错了 要不然你就库库找报错吧!