vue中实现百度地图全国与省市地图切换

于 2024-06-20 11:34:40 发布
阅读量355 收藏 9
点赞数 3
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43637720/article/details/139824316
版权

前言

本文主要是用于示例全国地图，点击省市地图直接跳转到该省市地图并展示，可以拓展在地图上显示标记点（本文未做示例），后续有完整代码，但是由于需要与本来项目业务代码进项分割，可能会有些问题，地图渲染上所需要的json文件，有资源链接，但是需要积分，在网上搜搜 也会有相关资源，不是非必要使用该json文件，注意一下导入的文件名称即可

文章目录

一、示例代码

1.1 地图json文件

资源地址：百度地图全国以及各省json文件

1.2 示例解析

1.dom层
默认渲染全国地图，返回按钮主要用于点击省市地图跳转进入省市的地图的时候，设置一个返回按钮，返回到全国地图

 <el-button size="mini"
            type="primary"
            v-if="mapBackBtnShow"
            @click="drawBaiduMap">
            返回
  </el-button>
  <div ref="mapChartsRef"
       style="width: 100%;height: 100%;z-index: 99;">
  </div>

2.逻辑准备
引入echarts

import * as echarts from 'echarts'

控制返回按钮显示隐藏

mapBackBtnShow: false,

3.主要逻辑方法

drawBaiduMap() {
      var that = this
      //1.中国地图
      var chinaMap = require('./homePage/chart.china.json')
      //2.台湾省地图
      var taiWanMap = require('./homePage/provinceJSON/taiwan.json')
      //3.海南省地图
      var haiNanMap = require('./homePage/provinceJSON/hainan.json')
      //4.安徽省地图
      var anHuiMap = require('./homePage/provinceJSON/anhui.json')
      //5.江西省地图
      var jiangXiMap = require('./homePage/provinceJSON/jiangxi.json')
      //6.湖南省地图
      var huNanMap = require('./homePage/provinceJSON/hunan.json')
      //7.云南省地图
      var yunNanMap = require('./homePage/provinceJSON/yunnan.json')
      //8.贵州省地图
      var guiZhouMap = require('./homePage/provinceJSON/guizhou.json')
      //9.广东省地图
      var guangDongMap = require('./homePage/provinceJSON/guangdong.json')
      //10.福建省地图
      var fuJianMap = require('./homePage/provinceJSON/fujian.json')
      //11.浙江省地图
      var zheJiangMap = require('./homePage/provinceJSON/zhejiang.json')
      //12.江苏省地图
      var jiangSuMap = require('./homePage/provinceJSON/jiangsu.json')
      //13.四川省地图
      var siChuanMap = require('./homePage/provinceJSON/sichuan.json')
      //14.重庆市市地图
      var chongQingMap = require('./homePage/provinceJSON/chongqing.json')
      //15.湖北省地图
      var huBeiMap = require('./homePage/provinceJSON/hubei.json')
      //16.河南省地图
      var heNanMap = require('./homePage/provinceJSON/henan.json')
      //17.山东省地图
      var shanDongMap = require('./homePage/provinceJSON/shandong.json')
      //18.吉林省地图
      var jiLinMap = require('./homePage/provinceJSON/jilin.json')
      //19.辽宁省地图
      var liaoNingMap = require('./homePage/provinceJSON/liaoning.json')
      //20.天津市市地图
      var tianJinMap = require('./homePage/provinceJSON/tianjin.json')
      //21.北京市市地图
      var beiJingMap = require('./homePage/provinceJSON/beijing.json')
      //22.河北省地图
      var heBeiMap = require('./homePage/provinceJSON/hebei.json')
      //23.山西省地图
      var shanXiMap = require('./homePage/provinceJSON/shanxi.json')
      //24.陕西省地图
      var shanXi2Map = require('./homePage/provinceJSON/shangxi.json')
      //25.宁夏回族自治区省地图
      var ningXiaMap = require('./homePage/provinceJSON/ningxia.json')
      //26.青海省地图
      var qingHaiMap = require('./homePage/provinceJSON/qinghai.json')
      //27.西藏自治区地图
      var xiZangMap = require('./homePage/provinceJSON/xizang.json')
      //28.黑龙江省地图
      var heiLongJiangMap = require('./homePage/provinceJSON/heilongjiang.json')
      //29.内蒙古自治区地图
      var neimengGuMap = require('./homePage/provinceJSON/neimenggu.json')
      //30.甘肃省地图
      var ganSuMap = require('./homePage/provinceJSON/gansu.json')
      //31.新疆维吾尔自治区省地图
      var xinJiangMap = require('./homePage/provinceJSON/xinjiang.json')
      //32.广西壮族自治区地图
      var guangxiMap = require('./homePage/provinceJSON/guangxi.json')
      //33.上海市地图
      var shangHaiMap = require('./homePage/provinceJSON/shanghai.json')
      //34.香港
      var xiangGangMap = require('./homePage/provinceJSON/xianggang.json')
      //35.澳门
      var aoMenGangMap = require('./homePage/provinceJSON/aomen.json')

      //设置初始地图
      var mapname = chinaMap
      var mapJson = [
        {
          name: '台湾省',
          json: taiWanMap,
        },
        {
          name: '海南省',
          json: haiNanMap,
        },
        {
          name: '安徽省',
          json: anHuiMap,
        },
        {
          name: '江西省',
          json: jiangXiMap,
        },
        {
          name: '湖南省',
          json: huNanMap,
        },
        {
          name: '云南省',
          json: yunNanMap,
        },
        {
          name: '贵州省',
          json: guiZhouMap,
        },
        {
          name: '广东省',
          json: guangDongMap,
        },
        {
          name: '福建省',
          json: fuJianMap,
        },
        {
          name: '浙江省',
          json: zheJiangMap,
        },
        {
          name: '江苏省',
          json: jiangSuMap,
        },
        {
          name: '四川省',
          json: siChuanMap,
        },
        {
          name: '重庆市',
          json: chongQingMap,
        },
        {
          name: '湖北省',
          json: huBeiMap,
        },
        {
          name: '河南省',
          json: heNanMap,
        },
        {
          name: '山东省',
          json: shanDongMap,
        },
        {
          name: '吉林省',
          json: jiLinMap,
        },
        {
          name: '辽宁省',
          json: liaoNingMap,
        },
        {
          name: '天津市',
          json: tianJinMap,
        },
        {
          name: '上海市',
          json: shangHaiMap,
        },
        {
          name: '北京市',
          json: beiJingMap,
        },
        {
          name: '河北省',
          json: heBeiMap,
        },
        {
          name: '山西省',
          json: shanXiMap,
        },
        {
          name: '陕西省',
          json: shanXi2Map,
        },
        {
          name: '宁夏回族自治区',
          json: ningXiaMap,
        },
        {
          name: '青海省',
          json: qingHaiMap,
        },
        {
          name: '西藏自治区',
          json: xiZangMap,
        },
        {
          name: '黑龙江省',
          json: heiLongJiangMap,
        },
        {
          name: '内蒙古自治区',
          json: neimengGuMap,
        },
        {
          name: '甘肃省',
          json: ganSuMap,
        },
        {
          name: '新疆维吾尔自治区',
          json: xinJiangMap,
        },
        {
          name: '广西壮族自治区',
          json: guangxiMap,
        },
        {
          name: '香港特别行政区',
          json: xiangGangMap,
        },
        {
          name: '澳门特别行政区',
          json: aoMenGangMap,
        },
      ]
      this.mapBackBtnShow = false
      var myChart = echarts.init(this.$refs.mapChartsRef)
      myChart.showLoading({ text: '正在加载数据' }) //增加等待提示
      //点击事件
      myChart.on('click', function (e) {
          var chooseName = mapJson.filter((item) => {
            return item.name.includes(e.name)
          })
          mapname = chooseName[0].json
          that.mapBackBtnShow = true
          //绘制地图
          mapInit()
      })
      //设置初始化时间
      setTimeout(function () {
        mapInit()
      }, 500)
      //创建地图
      var mapInit = () => {
        echarts.registerMap('China', mapname)
        //文件加载的动画
        myChart.hideLoading()
        //地图开始
        var option = {
          //设置背景颜色
          backgroundColor: '#fff',
          geo: {
            map: 'China', //地图为刚刚设置的China
            top: 10,
            zoom: 1, //当前视角的缩放比例
            roam: false, //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
          },
          tooltip: {
            show: true,
            triggerOn: 'mousemove',
            padding: [5, 8],
            enterable: true,
            transitionDuration: 1,
            textStyle: {
              color: '#606266',
              decoration: 'none',
            },
          },
          series: [
            //数据系列
            {
              type: 'map', //地图类型
              geoIndex: 0,
              aspectScale: 0.75, //长宽比
              //地图上文字
              label: {
                normal: {
                  show: false, //是否显示标签
                  textStyle: {
                    color: '#fff',
                  },
                },
                emphasis: {
                  textStyle: {
                    color: '#333',
                  },
                },
              },
              //地图区域的多边形 图形样式
              itemStyle: {
                normal: {
                  borderColor: '#909399',
                  borderWidth: 1.5,
                  // areaColor: '#12235c',
                  areaColor: '#eee',
                },
                emphasis: {
                  areaColor: '#FFDF33',
                  borderWidth: 0,
                },
              },
              // zoom: 1.2, //当前视角的缩放比例
              //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
              roam: false,
              map: 'China', //使用中国地图
            },
          ],
        }
        myChart.setOption(option)
        window.addEventListener('resize', () => {
            myChart.resize()
        })
      }
    },

在这里插入图片描述
在这里插入图片描述

二、完整代码

<template>
	<div>
		<el-button size="mini"
		            type="primary"
		            v-if="mapBackBtnShow"
		            @click="drawBaiduMap">
		            返回
		  </el-button>
		  <div ref="mapChartsRef"
		       style="width: 100%;height: 100%;z-index: 99;">
	  </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
	data(){
		return {
			mapBackBtnShow: false,
	},
	mounted() {
		this.drawBaiduMap()
	},
	methods:{
		    /* 地图 */
    drawBaiduMap() {
      var that = this
      //1.中国地图
      var chinaMap = require('./homePage/chart.china.json')
      //2.台湾省地图
      var taiWanMap = require('./homePage/provinceJSON/taiwan.json')
      //3.海南省地图
      var haiNanMap = require('./homePage/provinceJSON/hainan.json')
      //4.安徽省地图
      var anHuiMap = require('./homePage/provinceJSON/anhui.json')
      //5.江西省地图
      var jiangXiMap = require('./homePage/provinceJSON/jiangxi.json')
      //6.湖南省地图
      var huNanMap = require('./homePage/provinceJSON/hunan.json')
      //7.云南省地图
      var yunNanMap = require('./homePage/provinceJSON/yunnan.json')
      //8.贵州省地图
      var guiZhouMap = require('./homePage/provinceJSON/guizhou.json')
      //9.广东省地图
      var guangDongMap = require('./homePage/provinceJSON/guangdong.json')
      //10.福建省地图
      var fuJianMap = require('./homePage/provinceJSON/fujian.json')
      //11.浙江省地图
      var zheJiangMap = require('./homePage/provinceJSON/zhejiang.json')
      //12.江苏省地图
      var jiangSuMap = require('./homePage/provinceJSON/jiangsu.json')
      //13.四川省地图
      var siChuanMap = require('./homePage/provinceJSON/sichuan.json')
      //14.重庆市市地图
      var chongQingMap = require('./homePage/provinceJSON/chongqing.json')
      //15.湖北省地图
      var huBeiMap = require('./homePage/provinceJSON/hubei.json')
      //16.河南省地图
      var heNanMap = require('./homePage/provinceJSON/henan.json')
      //17.山东省地图
      var shanDongMap = require('./homePage/provinceJSON/shandong.json')
      //18.吉林省地图
      var jiLinMap = require('./homePage/provinceJSON/jilin.json')
      //19.辽宁省地图
      var liaoNingMap = require('./homePage/provinceJSON/liaoning.json')
      //20.天津市市地图
      var tianJinMap = require('./homePage/provinceJSON/tianjin.json')
      //21.北京市市地图
      var beiJingMap = require('./homePage/provinceJSON/beijing.json')
      //22.河北省地图
      var heBeiMap = require('./homePage/provinceJSON/hebei.json')
      //23.山西省地图
      var shanXiMap = require('./homePage/provinceJSON/shanxi.json')
      //24.陕西省地图
      var shanXi2Map = require('./homePage/provinceJSON/shangxi.json')
      //25.宁夏回族自治区省地图
      var ningXiaMap = require('./homePage/provinceJSON/ningxia.json')
      //26.青海省地图
      var qingHaiMap = require('./homePage/provinceJSON/qinghai.json')
      //27.西藏自治区地图
      var xiZangMap = require('./homePage/provinceJSON/xizang.json')
      //28.黑龙江省地图
      var heiLongJiangMap = require('./homePage/provinceJSON/heilongjiang.json')
      //29.内蒙古自治区地图
      var neimengGuMap = require('./homePage/provinceJSON/neimenggu.json')
      //30.甘肃省地图
      var ganSuMap = require('./homePage/provinceJSON/gansu.json')
      //31.新疆维吾尔自治区省地图
      var xinJiangMap = require('./homePage/provinceJSON/xinjiang.json')
      //32.广西壮族自治区地图
      var guangxiMap = require('./homePage/provinceJSON/guangxi.json')
      //33.上海市地图
      var shangHaiMap = require('./homePage/provinceJSON/shanghai.json')
      //34.香港
      var xiangGangMap = require('./homePage/provinceJSON/xianggang.json')
      //35.澳门
      var aoMenGangMap = require('./homePage/provinceJSON/aomen.json')

      //设置初始地图
      var mapname = chinaMap
      var mapJson = [
        {
          name: '台湾省',
          json: taiWanMap,
        },
        {
          name: '海南省',
          json: haiNanMap,
        },
        {
          name: '安徽省',
          json: anHuiMap,
        },
        {
          name: '江西省',
          json: jiangXiMap,
        },
        {
          name: '湖南省',
          json: huNanMap,
        },
        {
          name: '云南省',
          json: yunNanMap,
        },
        {
          name: '贵州省',
          json: guiZhouMap,
        },
        {
          name: '广东省',
          json: guangDongMap,
        },
        {
          name: '福建省',
          json: fuJianMap,
        },
        {
          name: '浙江省',
          json: zheJiangMap,
        },
        {
          name: '江苏省',
          json: jiangSuMap,
        },
        {
          name: '四川省',
          json: siChuanMap,
        },
        {
          name: '重庆市',
          json: chongQingMap,
        },
        {
          name: '湖北省',
          json: huBeiMap,
        },
        {
          name: '河南省',
          json: heNanMap,
        },
        {
          name: '山东省',
          json: shanDongMap,
        },
        {
          name: '吉林省',
          json: jiLinMap,
        },
        {
          name: '辽宁省',
          json: liaoNingMap,
        },
        {
          name: '天津市',
          json: tianJinMap,
        },
        {
          name: '上海市',
          json: shangHaiMap,
        },
        {
          name: '北京市',
          json: beiJingMap,
        },
        {
          name: '河北省',
          json: heBeiMap,
        },
        {
          name: '山西省',
          json: shanXiMap,
        },
        {
          name: '陕西省',
          json: shanXi2Map,
        },
        {
          name: '宁夏回族自治区',
          json: ningXiaMap,
        },
        {
          name: '青海省',
          json: qingHaiMap,
        },
        {
          name: '西藏自治区',
          json: xiZangMap,
        },
        {
          name: '黑龙江省',
          json: heiLongJiangMap,
        },
        {
          name: '内蒙古自治区',
          json: neimengGuMap,
        },
        {
          name: '甘肃省',
          json: ganSuMap,
        },
        {
          name: '新疆维吾尔自治区',
          json: xinJiangMap,
        },
        {
          name: '广西壮族自治区',
          json: guangxiMap,
        },
        {
          name: '香港特别行政区',
          json: xiangGangMap,
        },
        {
          name: '澳门特别行政区',
          json: aoMenGangMap,
        },
      ]
      this.mapBackBtnShow = false
      var myChart = echarts.init(this.$refs.mapChartsRef)
      myChart.showLoading({ text: '正在加载数据' }) //增加等待提示
      //点击事件
      myChart.on('click', function (e) {
          var chooseName = mapJson.filter((item) => {
            return item.name.includes(e.name)
          })
          mapname = chooseName[0].json
          that.mapBackBtnShow = true
          //绘制地图
          mapInit()
      })
      //设置初始化时间
      setTimeout(function () {
        mapInit()
      }, 500)
      //创建地图
      var mapInit = () => {
        echarts.registerMap('China', mapname)
        //文件加载的动画
        myChart.hideLoading()
        //地图开始
        var option = {
          //设置背景颜色
          backgroundColor: '#fff',
          geo: {
            map: 'China', //地图为刚刚设置的China
            top: 10,
            zoom: 1, //当前视角的缩放比例
            roam: false, //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
          },
          tooltip: {
            show: true,
            triggerOn: 'mousemove',
            padding: [5, 8],
            enterable: true,
            transitionDuration: 1,
            textStyle: {
              color: '#606266',
              decoration: 'none',
            },
          },
          series: [
            //数据系列
            {
              type: 'map', //地图类型
              geoIndex: 0,
              aspectScale: 0.75, //长宽比
              //地图上文字
              label: {
                normal: {
                  show: false, //是否显示标签
                  textStyle: {
                    color: '#fff',
                  },
                },
                emphasis: {
                  textStyle: {
                    color: '#333',
                  },
                },
              },
              //地图区域的多边形 图形样式
              itemStyle: {
                normal: {
                  borderColor: '#909399',
                  borderWidth: 1.5,
                  // areaColor: '#12235c',
                  areaColor: '#eee',
                },
                emphasis: {
                  areaColor: '#FFDF33',
                  borderWidth: 0,
                },
              },
              // zoom: 1.2, //当前视角的缩放比例
              //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
              roam: false,
              map: 'China', //使用中国地图
            },
          ],
        }
        myChart.setOption(option)
        window.addEventListener('resize', () => {
            myChart.resize()
        })
      }
    },
	}
}
</script>
缘月叙文
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
离线vue百度地图，实现简单了热图与百度地图显示
06-08
vue 离线百度地图加瓦片在线器，供大家学习，使用vue2，百度v3，也制作了热力图，瓦片不全，大家可也根据自身需要下载瓦片。
Vue+Echarts实现中国地图的省市切换
m0_48607837的博客
12-14 4732
Vue+Echarts实现中国地图的省市切换 首先要安装一下Echarts npm install echarts 在min.js中引入echarts import * as echarts from 'echarts' Vue.prototype.$echarts = echarts; 3.创建一个map.vue的组件,把一下代码复制到这个组建中 <template> <div> <div class="echartsGroup">
【百度地图】vue3+百度地图API实现全球导航，附源码
qq_42552251的博客
05-09 3095
你要实现导航服务，首先就要有个起始点，这两个点可以是用户输入的，也可以是让用户在地图点选，这里就选择点选方式获取起始点，然后用这两个点去查询可行的路线方案，最后再把这些路线分别展示到地图上。如果是要直接在中国大陆境内使用导航的话可以直接使用sdk提供的方法，选择起始点还是用上面的方法，传参给以下方法就可以直接使用，调用这个方法会自动生成起始点图标和路径，通过配置参数还能默认将视角定位到此处，非常方便。至此，就完成了基础的境外路线规划功能，可以在地图上选起始点调取WebAPI接口获取路线信息然后绘制路线。
vue百度地图bmapgl实现全国地图省级数据可视化
关于我遇到的或大或小的问题
04-26 3759
在nuxt中会出现window is not defined 的错误，但是并不影响运行，主要原因是vscode的node运行环境中使用的是global而非浏览器的window
Vue+ ECharts + 百度地图 实现全国、省、市、区县 地图展示；根据状态添加水波纹标注点，点击标注点弹出信息框；根据条件实现地区展示不同颜色
bueryao527的博客
09-15 1万+
效果图 前提 引入echarts，百度地图 index.html文件中 引入 <script src="https://cdn.bootcss.com/echarts/5.1.2/echarts.min.js"></script> <script src="https://api.map.baidu.com/api?v=3.0&ak=***"></script> 注意：ak 为百度地图的秘钥，必须是v=3.0 项目结构 html部分 &lt
vite + vue3 —— vue地图大屏项目
技术前端，忠于热爱 @0.活在风浪里
09-22 1万+
0-1 完成大屏中国地图
Vue中使用Datav 完成大屏基本布局
路虽远行则将至，事虽难做则必成。
11-30 2万+
Vue就像一个大房子，可以集成组件一起使用。Datav + Vue-Baidu-Map + ECharts,相互一起使用。经过这一套流程我们就可以快速搭建出属于自己的大屏框架，在根据实际需求进行更改。
vue中调用百度地图实现搜索等功能
01-08
vue中调用百度地图实现搜索等功能 在最近做电商项目时用户订单等物流信息想做的更加详细点所以加入了地图这个小功能，不是很难只是在一个未知的领域可能有点迷茫 现在也是体会到了，学新的东西还是得看官方文档。...
vue项目中使用百度地图的方法
08-27
在使用百度地图的方法时，需要在 Vue 项目中引入百度地图的 JavaScript 库，然后在组件中使用百度地图的 API 实现地图的显示和交互功能。例如，在上面的代码中，我们使用了 BMap.Map、BMap.Point、BMap.Marker 等 ...
vue使用百度离线地图资源
04-25
vue使用百度地图离线资源 该文件内容须放于项目public文件夹下 使用请参考博主博客：vue使用百度地图----离线地图 https://blog.csdn.net/weixin_45660840/article/details/108977917?spm=1001.2014.3001.5502 H.F...
vue用BMap百度地图实现即时搜索功能
10-16
主要为大家详细介绍了vue用BMap百度地图实现即时搜索功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue项目大屏可视化适配 transform+解决高德地图经纬度偏移
qq_45642765的博客
07-27 4657
vue js大屏适配 transform 方法+解决高德地图经纬度偏移问题
vue中使用echarts+Highmaps开发数据可视化大屏(数据分析/数据看板/科技感页面)
web小袋鼠
06-28 7907
echarts和highchart的区别 echarts echarts的前身是百度公司前端开发的一个图表库，后捐献给阿帕奇公司维护。 支持柱状图、饼状图、k线图、map图、热导向图、折线图等常用图表， 主要采用canvas画图。 highchart highcharts是国外的一家公司开发的图表库，主要采用svg画图。 支持的图表也很多，功能也比较强大。 到底是使用echarts还是使用highchart呢？(萝卜青菜各有所爱，当然你也可以选择G2等一些图表库) 此项目之所以使用echarts+highc
使用vue+echarts快速进行全国地图与各省市地图联动(下沉)
树上骑个猴的博客
08-28 7628
效果 使用前请使用npm(cnpm)安装echarts，详情见官网 main.js // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from '...
基于VUE + Echarts 实现可视化数据大屏展示效果
热门推荐
Hug_rj的博客
04-28 10万+
中国(寿光)国际蔬菜科技博览会智慧农业系统 — LED拼接屏展示前端开发文档 上线后呈现效果： 一、开发需求及方案制定 1、确定现场led拼接屏的宽高比，按照1920px*1080px的分辨率，F11全屏后刚好占满整屏且无滚动条； 2、与产品设计确定页面相关功能： 第一屏相关功能：实时时间、当地天气、菜博会基本信息、图表数据统计（近三日人流量、...
vue数据大屏，3d地图数据可视化
w530385371的专栏
01-13 2830
Vue项目数据大屏源码，webgl/ three.js数据可视化 项目采用three.js+vue进行开发，用到了3d地球特效，扩散光圈，动态标签，canvas气泡特效，文字滚动特效，3d环形图，echarts动态图表，rem屏幕适配 适合人群： 需要制作数据大屏，无设计的开发人员。 ...
vue + 百度地图 实现大屏嵌入地图
记录常见的问题以及解决办法
12-15 3239
效果图 1.首先在 pubilc 中 index.html 文件引入 <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你申请的ak"></script> 2.html 部分代码 <template> <div class="map_section"> <div class="map_box" id="mapbo..
vue疫情大屏数据展示+数据导出+地图图片下载
代码哈士奇的博客
01-19 5642
不废话，先上效果图 审美有限 下午5点开工 去掉吃饭时间 我的审美也只能让我做到这一步哈哈 有需要可以去github下载 github上代码是不加注释的 看注释在这个文章 github地址 https://github.com/dmhsq/vue-epidemic–big-screen 本来是想做那种科技风的，怎奈审美有限，又不想用别人的图片哈哈 下载的疫情地图如下 vue疫情大屏数据展示页面布局页面代码（非全部代码）地图绘制说明数据获取配置代理(解决跨域)页面数据说明发送请求处理数据图形绘制.
用Vue大屏可视化，数据可视化平台酷屏优胜它
amsonga的博客
09-16 4056
大屏可视化，老司机提到vue大家肯定不陌生，什么是Vue呢？Vue 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的
vue 实现百度地图切换城市
最新发布
05-24
要在 Vue 中实现百度地图切换城市，你需要使用百度地图 JavaScript API。以下是一个简单的示例： 首先，在你的 Vue 组件中引入百度地图 JavaScript API： ```javascript <script src="//api.map.baidu.com/api?v=2.0&ak=你的百度地图API密钥"></script> ``` 接下来，在 Vue 组件的 `mounted` 钩子函数中初始化地图： ```javascript mounted() { const map = new BMap.Map('map-container') this.map = map // 将地图对象保存在组件实例中 // 设置地图中心点和缩放级别 const point = new BMap.Point(this.lng, this.lat) map.centerAndZoom(point, this.zoom) // 添加城市选择控件 const size = new BMap.Size(70, 20) map.addControl(new BMap.CityListControl({ anchor: BMAP_ANCHOR_TOP_LEFT, offset: size, // 切换城市时触发的回调函数 onChangeBefore: (function() { // 隐藏信息窗口 this.infoWindow && this.infoWindow.close() }).bind(this), // 切换城市完成后触发的回调函数 onChangeAfter: (function(city) { // 更新组件中的城市信息 this.city = city.name this.lng = city.center.lng this.lat = city.center.lat // 移动地图中心点 const point = new BMap.Point(this.lng, this.lat) this.map.setCenter(point) }).bind(this) })) } ``` 注意，在上面的代码中，`this.lng`、`this.lat` 和 `this.zoom` 是组件中的数据属性，用于控制地图的中心点和缩放级别。`this.city` 也是组件中的数据属性，用于显示当前选择的城市。 最后，在你的 Vue 模板中添加一个容器来显示地图： ```html <template> <div> <div id="map-container" style="height: 500px;"></div> <p>当前城市：{{ city }}</p> </div> </template> ``` 这样，当用户在城市选择控件中切换城市时，地图的中心点会随之改变，同时组件中的城市信息也会更新。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值