1.首先需求是要实现类似于这样的：点击数据和地图两个按钮然后切换到不同页面

 2.首先，先实现点击两个按钮切换不同的页面：

 引用地图组件：

 代码如下：

<template>里：

<template>
    <div class="content">
        <div class="title" style="float: right; margin-bottom: 10px;">
            <div>
                <el-button class="btn_anniu" @click="change(0)" :class="{ newStyle:0===number}" type="primary" plain>数据</el-button>
                <el-button class="btn_anniu"  @click="change(1)" :class="{ newStyle:1===number}" type="primary" plain>地图</el-button>
            </div>
        </div>
        <div class="card" v-show="0===number">
            <h1>数据模块</h1>
        </div>
        <div v-show="1===number">
            <Bdmap></Bdmap>
        </div>
    </div>
</template>

<script>里：

<script>
import Bdmap from './Bdmap.vue';
  export default {
    components:{Bdmap},
    data() {
      return {
        number:0,
      }
    },
    methods: {
        change: function (index) {
            this.number = index;
          },
    }
  }
</script>

3.地图的实现：

首先我们得在百度地图官网（百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com)）去注册创建属于我们的密钥，具体注册流程可以看我发的这篇文章：如何快速制作百度地图可视化？（教你获取ak与地图初始化以及地图飞线层的实现,有demo）_Chen__FY的博客-CSDN博客

（1）注册登录完成后，复制我们的密钥，放在index.html中：

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script>

​

 （2）在vue.config.js中加入：

 externals: {
      "BMap": "BMap"
  },

（3） 地图的实现：不懂的可以看注释

先给地图占坑：

初始化地图，以及给地标设置值，我这里的经纬度是在大庆市，你们可以根据自身需求去选择，具体地标的经纬度可以看拾取坐标系统 (baidu.com)

注意： 在给标注的位置设置图标的时候，vue的项目必须用require（）来获取，我这里的图标是在阿里巴巴（iconfont-阿里巴巴矢量图标库）找的：

 其他的就不多说了，完整代码如下：

<template>
    <div>
            <el-card class="box-card">
                <div id="map" style="height:137vh; width:150vh">
                    <!-- 百度地图部分 占坑 -->
                </div>
            </el-card>
    </div>
</template>
<script>
import BMap from 'BMap'
export default {
    props: {
			msg:[],
		},
	name: 'baiduMap',
    data() {
        return {
            map: '', //地图实例
            virData: [] // 坐标数据 [{longitude: 116.958471, latitude: 39.785079, title: '标题'...}]
        }
    },
    mounted() {
        this.createMap();
    },
    methods: {
        //地图初始化
        createMap() {
            // 创建Map实例
            this.map = new BMap.Map("map");
            // 坐标点为大庆市
            let point = new BMap.Point(124.909369,46.663717)
            // 设定地图的中心点和坐标并将地图显示在地图容器中 
            this.map.centerAndZoom(point, 13)
            //添加地图类型控件
            this.map.addControl(
                new BMap.MapTypeControl({
                    mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
                })
            );
            this.map.setCurrentCity("大庆市");  // 设置地图显示的城市 此项是必须设置的
            this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
            // this.mkLocation() // 绘制marker
            this.virData = [
                { x: 124.992732, y:46.628478,name:'xxxxx'},
                { x:124.996181, y:46.609463,name:'xxxxxx'}
            ]
            if (this.virData && this.virData.length >0 ){
                this.virData.forEach((item,index) => {
                    //坐标标注点
                    let point = new BMap.Point(item.x,item.y);
                    let icon = new BMap.Icon(require('../../../../assets/images/地图-地标.png'), new BMap.Size(32, 32))
                    let marker = new BMap.Marker(point,{
                        icon:icon
                    });
                    //创建信息窗口
                    let opts = {
                    width: 100,
                    height: 150,
                    // title: item.name,
                    }
                    let message = `
                            <div style="margin-bottom: 10px; margin-top: 10px;">
                                <span>故障设备：</span>
                                <span>压力表</span>
                            </div>
                            <div style="margin-bottom: 10px">
                                <span>故障类型：</span>
                                <span>无数据</span>
                            </div>
                            <div style="margin-bottom: 10px">
                                <span>故障时间：</span>
                                <span>2023-01-24 18:23</span>
                            </div>
                            <div style="margin-bottom: 10px">
                                <span>维护建议：</span>
                                <span>xxxxxxxx</span>
                            </div>
                    //窗口信息
                    let infoWindow = new BMap.InfoWindow(message, opts);
                    this.map.addOverlay(marker);
                    /*标注的点击事件*/
                    marker.addEventListener('click', function () {
                    this.map.openInfoWindow(infoWindow, point)
                    })
                });
            }
        },
    }
}
</script>
<style lang="scss" scoped>
.box-card {
        width: 100%;
        height: 100%;
        margin-bottom: 20px;
        margin-top: 10px;
    }
</style>

实现效果如下：