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

前言

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

文章目录

  • 前言
    • @[TOC](文章目录)
    • 一、示例代码
        • 1.1 地图json文件
        • 1.2 示例解析
    • 二、完整代码


一、示例代码

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 = chinaMapvar 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 = falsevar 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].jsonthat.mapBackBtnShow = true//绘制地图mapInit()})//设置初始化时间setTimeout(function () {mapInit()}, 500)//创建地图var mapInit = () => {echarts.registerMap('China', mapname)//文件加载的动画myChart.hideLoading()//地图开始var option = {//设置背景颜色backgroundColor: '#fff',geo: {map: 'China', //地图为刚刚设置的Chinatop: 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 = chinaMapvar 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 = falsevar 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].jsonthat.mapBackBtnShow = true//绘制地图mapInit()})//设置初始化时间setTimeout(function () {mapInit()}, 500)//创建地图var mapInit = () => {echarts.registerMap('China', mapname)//文件加载的动画myChart.hideLoading()//地图开始var option = {//设置背景颜色backgroundColor: '#fff',geo: {map: 'China', //地图为刚刚设置的Chinatop: 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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/355507.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

多模态大模型面对误导性问题:看懂图片也会答错,一骗就中招

多模态大语言模型&#xff08;MLLMs&#xff09;因其在视觉理解和推理方面的突出表现&#xff0c;例如生成详细的图像描述和回答复杂的问题等&#xff0c;逐渐成为近期AI研究的热点。 然而&#xff0c;Bunny 团队的最新研究发现&#xff0c;尽管许多MLLMs对视觉内容能够正确理…

RocketMQ快速入门:集成spring, springboot实现各类消息消费(七)附带源码

0. 引言 rocketmq支持两种消费模式&#xff1a;pull和push&#xff0c;在实际开发中这两种模式分别是如何实现的呢&#xff0c;在spring框架和springboot框架中集成有什么差异&#xff1f;今天我们一起来探究这两个问题。 1. java client实现消息消费 1、添加依赖 <depen…

方舟云康亏损收窄:三年近10亿销售成本,平均付费及月活仍大幅承压

《港湾商业观察》施子夫 三度递表后&#xff0c;终于通过聆讯&#xff0c;方舟云康控股有限公司(以下简称&#xff0c;方舟云康)有望近期内挂牌港交所。方舟云康的国内运营主体为广州方舟云康信息科技集团有限公司、广州方舟医药有限公司。 值得关注的是&#xff0c;亏损的难…

Python日志管理利器:如何高效管理平台日志

一、为什么需要日志管理&#xff1f; 日志是应用程序的重要组成部分&#xff0c;它记录了应用程序的运行状态、错误信息以及用户交互等关键信息。良好的日志管理可以帮助开发人员及时发现和解决问题&#xff0c;提高应用程序的稳定性和可靠性。 项目在本地开发调试时&#xf…

vscode字符多行自动增长插件。

多行字符自动增长插件CharAutoIncre 当你使用shiftalt选中了多行,并输入了’1’,这时这几行都变成了’1’. 这时你可以选中&#xff08;shift左键&#xff09;为’1’的这几行, 接下来按下shiftaltq此时’1’变为了’12345’自增长的样式。 同时本插件支持字符’a-z,A-Z’。 目…

【知识图谱】基于neo4j开发的信息化文档分析系统(源码)

一、项目介绍 一款全源码&#xff0c;可二开&#xff0c;可基于云部署、私有部署的企业级知识库云平台&#xff0c;一款让企业知识变为实打实的数字财富的系统&#xff0c;应用在需要进行文档整理、分类、归集、检索、分析的场景。 为什么建立知识库平台&#xff1f; 助力企业…

IDEA中 pom.xml 设置自动提示

IDEA中 pom.xml 自动提示 IDEA中 pom.xml 自动提示设置如下&#xff1a; file–>Settings–>Build,Execution…–>Build Tools–>Maven–>Repositories 会看到类似表格的画面&#xff0c;内容是你的maven地址&#xff0c;选中后&#xff0c;右边有个Update的按…

Python酷库之旅-第三方库openpyxl(01)

目录 一、 openpyxl库的由来 1、背景 2、起源 3、发展 4、特点 4-1、支持.xlsx格式 4-2、读写Excel文件 4-3、操作单元格 4-4、创建和修改工作表 4-5、样式设置 4-6、图表和公式 4-7、支持数字和日期格式 二、openpyxl库的优缺点 1、优点 1-1、支持现代Excel格式…

鄂州职业大学2024年成人高等继续教育招生简章

鄂州职业大学&#xff0c;作为一所享有盛誉的高等学府&#xff0c;一直以来都致力于为社会培养具备专业技能和良好素养的优秀人才。在成人高等继续教育领域&#xff0c;该校同样表现出色&#xff0c;为广大渴望继续深造、提升自身能力的成年人提供了宝贵的学习机会。 随着社会…

椭圆的矩阵表示法

椭圆的矩阵表示法 flyfish 1. 标准几何表示法 标准几何表示法是通过椭圆的几何定义来表示的&#xff1a; x 2 a 2 y 2 b 2 1 \frac{x^2}{a^2} \frac{y^2}{b^2} 1 a2x2​b2y2​1其中&#xff0c; a a a 是椭圆的长半轴长度&#xff0c; b b b 是椭圆的短半轴长度。 2.…

一文带你全面详细了解安全运维

一、安全运维-网络 1、IP地址相关 IP地址属于网络层地址&#xff0c;用于标识网络中的节点设备。 IP地址由32bit构成&#xff0c;每8bit一组&#xff0c;共占用4个字节。 IP地址由两部分组成&#xff0c;网络位和主机位。 IP地址分类&#xff1a; 类别网络位子网掩码私有地…

云原生Kubernetes系列项目实战-k8s集群+高可用负载均衡层+防火墙

一、Kubernetes 区域可采用 Kubeadm 方式进行安装&#xff1a; 名称主机部署服务master192.168.91.10docker、kubeadm、kubelet、kubectl、flannelnode01192.168.91.11docker、kubeadm、kubelet、kubectl、flannelnode02192.168.91.20docker、kubeadm、kubelet、kubectl、flan…

Linux 一键部署 Nginx1.26.1 + ModSecurity3

前言 ModSecurity 是 Apache 基金会的一个开源、高性能的 Web 应用程序防火墙(WAF),它提供了强大的安全规则引擎,用于检测和阻止各种攻击行为,如 SQL 注入、XSS 跨站点脚本攻击等。而 nginx 是一个高性能的 Web 服务器,常用于处理大量的并发请求,具有很高的负载均衡能力…

从0开始C++(三):构造函数与析构函数详解

目录 构造函数 构造函数的基本使用 构造函数也支持函数重载 构造函数也支持函数参数默认值 构造初始化列表 拷贝构造函数 浅拷贝和深拷贝 析构函数 总结 练习一下ヽ(&#xffe3;▽&#xffe3;)&#xff89; 构造函数 构造函数的基本使用 构造函数是一种特殊的成…

HTML(17)——圆角和盒子阴影

盒子模型——圆角 作用&#xff1a;设置元素的外边框为圆角 属性名&#xff1a;border-radius 属性值&#xff1a;数字px/百分比 也可以每个角设置不同的效果&#xff0c;从左上角顺时针开始赋值&#xff0c;没有取值的角与对角取值相同。 正圆 给正方形盒子设置圆角属性…

WordPress实时搜索插件Ajax Search Lite,轻松替代默认搜索功能

WordPress自带的默认搜索功能是跳转到搜索结果页&#xff0c;如果你想要实时搜索功能&#xff0c;特别是在问答中心显示搜索功能&#xff0c;那么建议使用这个WordPress实时搜索插件Ajax Search Lite&#xff0c;它可以在文章、页面、自定义类型文章中搜索标题、内容、摘要、自…

DP:完全背包+多重背包问题

完全背包和01背包的区别就是&#xff1a;可以多次选 一、完全背包&#xff08;模版&#xff09; 【模板】完全背包_牛客题霸_牛客网 #include <iostream> #include<string.h> using namespace std; const int N1001; int n,V,w[N],v[N],dp[N][N]; //dp[i][j]表示…

队列 + 宽搜(BFS)

例题一 解法&#xff1a; 算法思路&#xff1a; 层序遍历即可~ 仅需多加⼀个变量&#xff0c;⽤来记录每⼀层结点的个数就好了。 例题二 解法&#xff08;层序遍历&#xff09;&#xff1a; 算法思路&#xff1a; 在正常的层序遍历过程中&#xff0c;我们是可以把⼀层的结点…

SpringBoot整合justauth实现多种方式的第三方登陆

目录 0.准备工作 1.引入依赖 2.yml文件 3. Controller代码 4.效果 参考 0.准备工作 你需要获取三方登陆的client-id和client-secret 以github为例 申请地址&#xff1a;Sign in to GitHub GitHub 1.引入依赖 <?xml version"1.0" encoding"UTF-8&quo…

行车记录仪文件夹“0字节”现象解析与恢复策略

一、行车记录仪文件夹“0字节”现象描述 行车记录仪作为现代驾驶中的必备设备&#xff0c;其储存的视频数据对于事故记录和取证至关重要。然而&#xff0c;有时车主们可能会遇到这样一个问题&#xff1a;行车记录仪的某个文件夹内的文件突然变成了0字节大小&#xff0c;无法正…