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

相关推荐
编程猪猪侠2 分钟前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞6 分钟前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路28 分钟前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失94930 分钟前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue86831 分钟前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
UncleKyrie36 分钟前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_39 分钟前
深入解析前后端分离中的 /api 设计:从路由到代理的完整指南
前端·javascript·api
你听得到111 小时前
Flutter - 手搓一个日历组件,集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构
风清云淡_A1 小时前
【REACT18.x】CRA+TS+ANTD5.X封装自定义的hooks复用业务功能
前端·react.js
@大迁世界1 小时前
第7章 React性能优化核心
前端·javascript·react.js·性能优化·前端框架