html海南地图插件,Echarts 地图(map)插件之 鼠标HOVER和tooltip自定义数据
在项目开发中,有需要用到地图的地方,百度的echarts地图插件就是个不错的选择,
这里总结一下地图自定义鼠标HOVER时的事件和自定义tooltip数据;
一、鼠标HOVER时的事件:
参照官方文档解释,
可以看出这款插件有丰富的鼠标事件可供选择:
调用鼠标HOVER事件的方法很简单,只需把以下代码放到charts()调用的函数的最底部即可
1 var ecConfig = require(‘echarts/config‘);2 myChart.on(ecConfig.EVENT.HOVER, function(param){3 var selected =param.name;4 //write your code here
5 //console.log(selected);打印参数
6 //hoverin();调用自定义函数
7 //document.getElementById(‘wrong-message‘).innerHTML = str;
8 });
二、tooltip的数据自定义;
这块研究了一段时间,都是浅浅的研究,
tooltip就是鼠标放在地图上显示的提示,如图红框里的就是tooltip的内容;
这里总结的主要是这块数据的自定义;
官方文档介绍说需要修改formatter;
option ={
tooltip : {
trigger:‘item‘,
formatter:‘{b}‘}
},
文档中说明:formatter支持函数自定义数据及模板
那么,我们可以把上面的代码改造一下:
首先自定义一些数据:(例子)这里是图片的url
var $imgs =[
{area:‘北京‘, url:‘http://www.blingschool.com/template/33/pc/images//logo2.png‘},
{area:‘天津‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
{area:‘上海‘, url:‘http://www.blingschool.com/template/33/pc/images//logo2.png‘},
{area:‘重庆‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
{area:‘河北‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
{area:‘河南‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
{area:‘云南‘, url:‘http://www.blingschool.com/template/33/pc/images//logo2.png‘},
{area:‘辽宁‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
{area:‘黑龙江‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
{area:‘湖南‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
{area:‘安徽‘, url:‘http://www.blingschool.com/template/33/pc/images//logo2.png‘},
{area:‘山东‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
{area:‘新疆‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
{area:‘江苏‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
{area:‘浙江‘, url:‘http://www.blingschool.com/template/33/pc/images//logo2.png‘},
{area:‘江西‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
{area:‘湖北‘, url:‘http://www.blingschool.com/template/33/pc/images//logo2.png‘},
{area:‘广西‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
{area:‘甘肃‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
{area:‘山西‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
{area:‘内蒙古‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
{area:‘陕西‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
{area:‘吉林‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
{area:‘福建‘, url:‘http://www.blingschool.com/template/33/pc/images//logo2.png‘},
{area:‘贵州‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
{area:‘广东‘, url:‘http://www.blingschool.com/template/33/pc/images//logo2.png‘},
{area:‘青海‘, url:‘http://www.blingschool.com/template/33/pc/images//logo2.png‘},
{area:‘西藏‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
{area:‘四川‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
{area:‘宁夏‘, url:‘http://www.blingschool.com/template/33/pc/images//logo2.png‘},
{area:‘海南‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
{area:‘台湾‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
{area:‘香港‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘},
{area:‘澳门‘, url:‘http://www.blingschool.com/template/33/pc/images//logo3.png‘}
];
当鼠标HOVER的时候,去判断取哪些值来显示;
tooltip : {
trigger:‘item‘,
formatter:function(params,ticket,callback){var $pna =params.name;var res = ‘‘;for(var i = 0;i
res= ‘‘;//设置自定义数据的模板,这里的模板是图片//console.log(res);
break;
}
}
setTimeout(function(){//仅为了模拟异步回调
callback(ticket, res);//回调函数,这里可以做异步请求加载的一些代码
},1000)return ‘loading‘;
}
}
最终完成的效果如图
原文:http://www.cnblogs.com/wwlhome/p/4643525.html
html海南地图插件,Echarts 地图(map)插件之 鼠标HOVER和tooltip自定义数据相关推荐
- 百度地图结合echarts地图运历图
百度地图结合echarts地图运历图 关于各省显示车辆发车数量 引入部分 <script src="~/Scripts/Echarts/Js/esl.js"></ ...
- Echarts 饼图总数展示与鼠标hover事件
效果图: 解决思想: 总数展示:其为title,进行调位置 hover事件:mouseover, mouseout 代码: initPieChart(){// 初始化数据const text = '问 ...
- echarts地图学习(使用geoJson数据绘制地图)
参考文档 使用echarts完成中国省市区县镇地图展示 echarts地图(中国地图展示各省数据) echarts实现中国地图区域分布图 vue + echarts 利用echarts中的map地图中 ...
- php代码中怎么插入地图,php插入地图
CSS样式1 2 3 4 .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-ri ...
- 微信JS-SDK之地理位置的获取与在线导航,集成百度地图实现在线地图搜索
原创声明:本文来源于本人另一博客[微信JS-SDK之地理位置的获取,集成百度地图实现在线地图搜索]原创作品,绝非他处摘取,转载请联系博主 本次讲解微信开发第三篇:获取用户地址位置信息,是非常常用的功能 ...
- 结合奥维地图与百度地图api进行路径规划开发测试(python、HTML)
第一步:奥维地图如何得到规划路径上轨迹点的经纬度(参见我之前的博客). 第二步:各种坐标系转换,选择对应转换坐标系以及输入输出文件路径后可以直接调用(python批量转换,每次运行前清空输出文件res ...
- 微信公众号开发《三》微信JS-SDK之地理位置的获取,集成百度地图实现在线地图搜索
本次讲解微信开发第三篇:获取用户地址位置信息,是非常常用的功能,特别是服务行业公众号,尤为需要该功能,本次讲解的就是如何调用微信JS-SDK接口,获取用户位置信息,并结合百度地铁,实现在线地图搜索,与 ...
- wordpress Disable Google Map 插件优化;禁用谷歌地图
1.wordpress安装国外主题后,访问很卡,通过浏览器调试发现因加载谷歌地图造成. 2.网上有提供 : Display Google Map 这个插件,但是这个插件有漏洞,只处理了<scri ...
- echarts显示地图以及jQuery地域选择器插件
前几天再做项目的时候用到了echarts的map显示.由于官网上的例子有限,我要在例子上进行扩展,很是搞了一番功夫.话不多说了,看例子: 1.echarts作为百度的一个开源插件,在有些地方可以做的很 ...
最新文章
- JavaScript 入门基础 (八)
- python自定义函数画图_4.1-5 自定义函数
- Xshell中输入rz提示:-bash: rz: command not found
- 深港澳大湾区(深圳).NET技术交流会圆满成功
- mysq和mysqli关系
- opensource项目_最佳Opensource.com:教育
- 20190804:有效的括号(误删补发)
- linux卸载jdk,安装jdk
- latex插入表格:三线表格、普通表格
- gitlab安装注册记录——gitlab(一)
- 聊聊我在腾讯和字节工作感受
- 游戏运营的工作中是做什么
- c 语言识别图片中的文字,Tesseract OCR图片识别为文字
- Ansys/Abaqus/nbsp;热应力分析.20…
- 离别,总免不了有些悲伤
- 【微信小程序】小程序功能开发
- 【CSS如何画简单的三角形或者梯形】
- 线性代数:第四章 向量组的线性相关性(1)向量组的线性相关性 向量组的秩
- 【ROM定制】官改教程:super.img解打包!
- 同济版高等数学复习笔记(上册第五、六章)