vue + echars地图省市区 + 添加点标记

echars地图

监控大屏的一个模块

定义地图位置大小

 <div id="mapChart" class="mapChart"></div>#mapChart {width: 1000px;height: 600px;}data() {return {myChart: '',distributionOptions: '',seriesList: [],old_click: '' //判断是否重复点击用于返回地图首页}},props: {data: [Array, Object]},

安装echars,配置地图,
定义三组数据,用于echars地图的展示省市区

var provinces = ['310000', '130000', '140000', '150000', '210000', '220000', '230000', '320000', '330000', '340000', '350000', '360000', '370000', '410000', '420000', '430000', '440000', '450000', '460000', '510000', '520000', '530000', '540000', '610000', '620000', '630000', '640000', '650000', '110000', '120000', '500000', '810000', '820000', '710000']
var provincesText = ['上海', '河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省', '黑龙江省', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省', '湖南省', '广东省', '广西省', '海南省', '四川省', '贵州省', '云南省', '西藏自治区', '陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区', '北京市', '天津市', '重庆市', '香港', '澳门', '台湾省']
var provincesName = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan']

这三组数据也可以后端配置,这三组数据拿的原文链接里的内容 , 配数组的时候位置要对应

  mounted() {let that = thissetTimeout(() => {let data = that.data.equipmentInfoListfor (let i = 0; i < data.length; i++) {that.seriesList.push({'name': data[i].name,'value': [data[i].longitude, data[i].latitude],'address': data[i].addressname})}// 我这个是后端请求,下边是 echars地图json文件的获取地址//  http://datav.aliyun.com/tools/atlas/index.html#&lat=32.287132632616384&lng=101.1181640625&zoom=4//这个网站获取数据 有三种处理  前端自己请求  下载到项目  后端请求// 后边拼接的这个 +full  省市需要加 到了区县 就不用加了  很坑 需要做兼容getamapData({ 'code': 省市区代号(山东 370000) + '_full' }).then(s => {if (s.code === 200) {//这个如果不是后端传的 是自己配置的三个数组 直接写 china 显示全国地图,显示省区的地图 传你配置的三个数组中的值//我这个一是后端传的 二是加账户权限的,所以传的多,//第二个参数传 获取的json数据that.init(数据组(add_coding: "370000",fenBuAddresses: null,pinyin:"shandongsheng",userAddressName: "山东省), JSON.parse(s.data))} else {this.$message({showClose: true,message: '数据维护中...',type: 'warning'})}})}, 500)},

//methods//显示各省地图getProvinceMapOpt(provinceAlphabet, name,textname) {this.old_click = provinceAlphabetvar  deviceList//根据所有地区设备数据进行筛选 选择点击地区的if(textname === 1){deviceList = this.seriesList}else{deviceList = this.changeSeriesList(textname)}getamapData({ 'code': provinceAlphabet + '_full' }).then(s => {if (s.code === 200) {echarts.registerMap(name, JSON.parse(s.data))this.changeOptions(name, deviceList)this.myChart.setOption(this.distributionOptions, true)} else {this.getProvinceMapOpt(100000, that.data.fenBuAddress.userAddressName)this.$message({showClose: true,message: '当前地区暂无权限',type: 'warning'})}})},// 浏览器窗口大小改变时，重新加载图表以自适应resizeCharts: _debounce(function() {echarts.init(document.getElementById('mapChart')).resize()}, 500),// 初始化地图数据init(data,JsonList) {echarts.registerMap(data.userAddressName, JsonList)this.changeOptions(data.userAddressName, this.seriesList)this.myChart = echarts.init(document.getElementById('mapChart'))this.myChart.setOption(this.distributionOptions)// 下面就是创建了一个点击事件，目的是点击省份子区域的时候可以切换到省份地图this.myChart.on('click', chinaParam => {let idx = data.fenBuAddresses.findIndex((itm) => itm.userAddressName === chinaParam.name)if (idx === -1) {this.getProvinceMapOpt(data.add_coding, data.userAddressName,data.userAddressName)this.$message({showClose: true,message: '当前地区暂无权限',type: 'warning'})} else {let code = data.fenBuAddresses[idx].add_codingif (this.old_click === code) {this.getProvinceMapOpt(data.add_coding, data.userAddressName,1)   // 返回全国地图 由 1 判断显示所有设备地址数据} else {this.getProvinceMapOpt(code, data.fenBuAddresses[idx].pinyin,data.fenBuAddresses[idx].userAddressName)}}})window.onresize = function() {this.myChart.resizeCharts()}},//changeOptions(name, datalist) {// 经纬度数据const seriesList = [{data: datalist}]// 图标const series = seriesList.map(v => {return {type: 'scatter', //配置显示方式为用户自定义coordinateSystem: 'geo',roam : false,//禁止拖拽data: v.data}})// optionsthis.distributionOptions = {tooltip: {        // 提示框组件show: true,     // 显示提示框组件trigger: 'item',     // 触发类型triggerOn: 'mousemove',  // 出发条件formatter: '名称:{b}<br/>坐标:{c}'},series,  // 数据geo: {map: name || 'china',  // 引入地图 省份或者 国家layoutCenter: ['50%', '50%'], //设置后left/right/top/bottom等属性无效layoutSize: '45%',roam: true, //开启鼠标缩放和漫zoom: 2,label: {normal: {//静态的时候展示样式show: true, //是否显示地图省份得名称textStyle: {color: '#fff',fontSize: 10,fontFamily: 'Arial'}},emphasis: {  // 高亮状态下的样式//动态展示的样式color: '#fff'}},itemStyle: {   // 地图区域的多边形 图形样式。normal: {borderColor: '#07919e',  // 边框颜色areaColor: '#1c2f59',    //  区域颜色textStyle: {             // 文字颜色color: '#fff'},shadowBlur: 10,          // 图形阴影的模糊大小shadowOffsetX: 10        // 阴影水平方向上的偏移距离。},emphasis: {areaColor: '#1c2f59',color: '#fff'}}}}}

这里是原文链接 https://www.cnblogs.com/wjw1014/p/13529371.html

vue + echars地图省市区 + 添加点标记相关推荐

GIS（一）——在js版搜索地图上添加Marker标记
由于我们做的是有关于旅游方面的项目,所以涉及到了地图功能.我接到的其中一个任务就是,在地图上显示指定的几个景点,并在地图上加上标记. 我们项目用的是搜狗地图,使用的是js版本.大家有兴趣的话,可以参考 ...
vue echarts地图省市区下钻详解
哈喽你们好!我是小邱,应该会有很多朋友和我都是全栈,我希望今天发表的文章对大家能够有所帮助. 今天我又要说下我不太熟练地vue技术了虽然不熟练啊但是思路清晰哈哈上码如果你觉得我文章还不错就点个关注 ...
vue echarts地图省市区下钻
一项目做了一个省市区下钻全国放不出来图市县区二直接上代码这就是上面丑丑的省市区,代码没优化,撸出来什么样就是什么样, 看着这几个if 感觉自己好low, 但是比较直观哈哈哈 low就 ...
vue高德地图省市区，区域划分。district.search 一直报no_data
写完后会发现有报错 // 创建地图renderBmap() {this.bmap = new AMap.Map("container", {resizeEnable: true, ...
使用Python调用百度地图的API在地图上添加标记
写在前面近期博主工作太忙,快一个月没更新博客.今天跑了大半天的腿,被一堆破事儿弄的无比憋屈,写篇博客调节一下心情. 博主的目的是在地图上做一些标记,然后保存为html网页文件,这样方便我的软件调用, ...
高德地图的使用点标记、折线标记
高德地图是非常方便的插件可以在地图上添加点标记标记内容首先要在页面引入高德地图 <script src="https://webapi.amap.com/maps?v=1.4.13& ...
vue 给圆遮盖物添加文字高德地图_通过 Vue + 高德地图 JS API 在地图上标记咖啡店...
通过 Vue + 高德地图 JS API 在地图上标记咖啡店由学院君创建于2年前, 最后更新于 2年前版本号 #1 在上一篇教程中我们为咖啡店地址进行了地理编码,这样,就可以调用高德地图支持的 ...
vue 使用高德地图给海量点标记，并点击标记弹出信息窗口，信息窗口绑定点击事件
目录一.需求二.引入高德地图 2.1.将高德地图引入到项目中 2.2.查看官网快速上手,熟悉高德地图的主要API 2.3.海量点标注要用到的API文档 2.4.全部代码其他: 一.需求因为不知 ...
Google Map API v2 （三）----- 地图上添加标记（Marker），标记info窗口，即指定经纬度获取地址字符串...
接上篇 http://www.cnblogs.com/inkheart0124/p/3536322.html 1,在地图上打个标记 1 private MarkerOptions mMarkOptio ...

vue + echars地图省市区 + 添加点标记

echars地图

vue + echars地图省市区 + 添加点标记相关推荐

最新文章

热门文章

vue + echars地图 省市区 + 添加点标记

echars地图

vue + echars地图 省市区 + 添加点标记相关推荐

最新文章

热门文章

vue + echars地图省市区 + 添加点标记

vue + echars地图省市区 + 添加点标记相关推荐