Vue2.6+Echarts+Bmap构建地图

最新推荐文章于 2024-03-30 10:00:21 发布

CoderJoon

最新推荐文章于 2024-03-30 10:00:21 发布

阅读量708

点赞数 3

分类专栏： vue 文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_47121832/article/details/136041674

版权

本文介绍了如何在Vue2.6项目中集成Echarts库和Bmap插件，展示了如何在模板和脚本中设置地图组件，包括地图中心、缩放级别以及使用百度地图API的关键。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue2.6+Echarts+Bmap构建地图

在你的页面中引入你的echarts库中的bmap库

// 引入依赖库 在echarts中使用bmap进行创建地图
import "echarts/extension/bmap/bmap"

然后直接开始写你的地图组件搭建页面

<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