Vue2.6+Echarts+Bmap构建地图

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 别搞错了 要不然你就库库找报错吧!

相关推荐
fruge7 分钟前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
neter.asia16 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫17 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
光影少年36 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_37 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891139 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾40 分钟前
前端基础-html-注册界面
前端·算法·html
Rattenking41 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
Dragon Wu43 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym1 小时前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化