Echarts地图案例

若需要完整项目代码，可点我前往下载。

项目介绍

springboot项目，一个控制器，几个js、css，一个html

功能介绍

1.地图缩放拖拽
2.点击地图区域可显示市地图、区县独立完整地图。
3.双击地图可全屏放大。
4.轮播效果：鼠标离开地图区域，自动开启轮播，鼠标移入则停止轮播。其中覆盖物的提示框可添加图片。

核心文件

控制器

package com.example.demo.controller;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;/*** 首页地图控制器** @author fangmingzheng* @date 2022/2/18*/
@Controller
@RequestMapping("/index")
public class IndexController {/*** @Description: http://localhost:9999/index/toIndex* @Param: []* @return: java.lang.String* @Author: fangmingzheng* @Date: 2022/2/18*/@RequestMapping("/toIndex")public String toIndex() {return "map/index";}
}

html

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>demo</title><!-- 加载进度 --><link rel="stylesheet" href="/map/utils/pace/pace.min.css">
</head>
<body>
<div style="height: 700px;width: 700px;margin: 0 auto;background-color: #154e90" id="bigDiv"><div class="dper-chart-map" style="height: 95%;width: 95%;margin: 0 auto;" id="dper-chart-map"></div>
</div>
<!-- 配置 -->
<script src="/map/utils/jquery/jquery.js"></script>
<!-- jQuery -->
<script src="/map/utils/echarts/echarts.min.js"></script>
<!-- echarts4.0.4引入 -->
<script type="text/javascript"src="https://api.map.baidu.com/api?v=2.0&ak=QmO87g3f8Xor7s2QOs4VGeOcHgwtPLfj"></script>
<script type="text/javascript"src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
<script type="text/javascript"src="/map/utils/echarts/bmap.min.js"></script>
<script src="/map/utils/pace/pace.min.js"></script>
<!-- 加载进度 -->
<script src="/map/utils/countUp/countUp.min.js"></script>
<!-- 工具库 -->
<script src="/map/js/appDemo.js"></script>
<!-- 业务 -->
</body>
</html>

var bozhou = "/map/cityjson/bozhou.json";
var qiaocheng = "/map/cityjson/qiaocheng.json";
var guoyang = "/map/cityjson/guoyang.json";
var lixin = "/map/cityjson/lixin.json";
var mengcheng = "/map/cityjson/mengcheng.json";var qcPoints=new Array();
var gyPoints=new Array();
var mcPoints=new Array();
var lxPoints=new Array();var dataDa = [];
dataDa.push({name: 'aaaa',value: 16,level: 3
});
dataDa.push({name: 'bbbb',value: 12,level: 2
});
dataDa.push({name: 'cccc',value: 23,level: 1
});
dataDa.push({name: 'dddd',value: 34,level: 2
});
dataDa.push({name: 'eeee',value: 21,level: 3
});
dataDa.push({name: 'ffff',value: 15,level: 1
});
dataDa.push({name: 'gggg',value: 54,level: 2
});$(function () {$.getJSON(qiaocheng, function (qcData) {var qcDataArr = qcData.features[0].geometry.coordinates[0][0];var pointsArr = new Array();$.each(qcDataArr, function (infoIndex, info){pointsArr.push(new BMap.Point(info[0],info[1]));});qcPoints = new BMap.Polygon(pointsArr,{strokeColor:"#f50704",fillColor:"#cfcfcf", strokeWeight:5, strokeOpacity:0,fillOpacity:0});});$.getJSON(guoyang, function (gyData) {var gyDataArr = gyData.features[0].geometry.coordinates[0][0];var pointsArr = new Array();$.each(gyDataArr, function (infoIndex, info){pointsArr.push(new BMap.Point(info[0],info[1]));});gyPoints = new BMap.Polygon(pointsArr,{strokeColor:"#f50704",fillColor:"#cfcfcf", strokeWeight:5, strokeOpacity:0,fillOpacity:0});});$.getJSON(mengcheng, function (mcData) {var mcDataArr = mcData.features[0].geometry.coordinates[0][0];var pointsArr = new Array();$.each(mcDataArr, function (infoIndex, info){pointsArr.push(new BMap.Point(info[0],info[1]));});mcPoints = new BMap.Polygon(pointsArr,{strokeColor:"#f50704",fillColor:"#cfcfcf", strokeWeight:5, strokeOpacity:0,fillOpacity:0});});$.getJSON(lixin, function (lxData) {var lxDataArr = lxData.features[0].geometry.coordinates[0][0];var pointsArr = new Array();$.each(lxDataArr, function (infoIndex, info){pointsArr.push(new BMap.Point(info[0],info[1]));});lxPoints = new BMap.Polygon(pointsArr,{strokeColor:"#f50704",fillColor:"#cfcfcf", strokeWeight:5, strokeOpacity:0,fillOpacity:0});});
});echarts.extendsMap = function (id, opt) {// 实例var chart = this.init(document.getElementById(id));var curGeoJson = {};var cityMap = {"谯城区": qiaocheng,"涡阳县": guoyang,"利辛县": lixin,"蒙城县": mengcheng};var geoCoordMap = {'aaaa': [115.783316,33.886373],'bbbb': [116.221608,33.501215],'cccc': [116.208699,33.151594],'dddd': [116.580787,33.282041],'eeee': [116.055107,33.650494],'ffff': [116.216173,33.059655],'gggg': [116.382584,33.39711]};var levelColorMap = {'1': 'rgba(241, 109, 115, .8)','2': 'rgba(255, 235, 59, .7)','3': 'rgba(147, 235, 248, 1)','4': 'rgba(0, 255, 0, .8)'};var defaultOpt = {mapName: 'china',     // 地图展示goDown: false,        // 是否下钻bgColor: '#404a59',   // 画布背景色activeArea: [],       // 区域高亮,同echarts配置项data: [],// 下钻回调(点击的地图名、实例对象option、实例对象)callback: function (name, option, instance) {}};if (opt) opt = this.util.extend(defaultOpt, opt);// 层级索引var name = [opt.mapName];var idx = 0;var pos = {leftPlus: 115,leftCur: 150,left: 198,top: 50};var line = [[0, 0], [8, 11], [0, 22]];// stylevar style = {font: '18px "Microsoft YaHei", sans-serif',textColor: '#eee',lineColor: 'rgba(147, 235, 248, .8)'};var handleEvents = {/*** i 实例对象* o option* n 地图名**/resetOption: function (i, o, n) {var breadcrumb = this.createBreadcrumb(n);o.geo.map = n;o.geo.zoom = 0.4;i.clear();i.setOption(o);this.zoomAnimation();opt.callback(n, o, i);},// 设置 覆盖物对象 effectscatterinitSeriesData: function (data) {var temp = [];//console.log(data);for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];if (geoCoord) {temp.push({name: data[i].name,value: geoCoord.concat(data[i].value, data[i].level)});}}return temp;},// 区域页面展示动画zoomAnimation: function () {var count = null;var zoom = function (per) {if (!count) count = per;count = count + per;chart.setOption({geo: {zoom: count}});if (count < 1) window.requestAnimationFrame(function () {zoom(0.2);});};window.requestAnimationFrame(function () {zoom(0.2);});},/*** name 地图名**/createBreadcrumb: function (name) {var cityToPinyin = {"谯城区": "qiaocheng","涡阳县": "guoyang","利辛县": "lixin","蒙城县": "mengcheng"};var breadcrumb = {type: 'group',id: name,left: pos.leftCur + pos.leftPlus,top: pos.top + 3,children: [{type: 'polyline',left: -90,top: -5,shape: {points: line},style: {stroke: '#fff',key: name// lineWidth: 2,},onclick: function () {var name = this.style.key;handleEvents.resetOption(chart, option, name);}}, {type: 'text',left: -68,top: 'middle',style: {text: name,textAlign: 'center',fill: style.textColor,font: style.font},onclick: function () {var name = this.style.text;handleEvents.resetOption(chart, option, name);}}, {type: 'text',left: -68,top: 10,style: {name: name,text: cityToPinyin[name] ? cityToPinyin[name].toUpperCase() : '',textAlign: 'center',fill: style.textColor,font: '12px "Microsoft YaHei", sans-serif'},onclick: function () {//console.log(this.style);var name = this.style.name;handleEvents.resetOption(chart, option, name);}}]};pos.leftCur += pos.leftPlus;return breadcrumb;}};// 设置地图标题var option = {backgroundColor: opt.bgColor,title: {text: '缩放拖动、点击往返市区地图、双击地图全屏放大、轮播带图片提示框',x: '40',textStyle: {color: '#fff'}},tooltip: {trigger: 'item',axisPointer: { // 坐标轴指示器配置项。axis: 'auto', // 指示器的坐标轴。snap: true, // 坐标轴指示器是否自动吸附到点上},position: function (point, params, dom, rect, size) {return [point[0]+5, point[1]+5];},//formatter: "{a} <br/>{b} : {c} ({d}%)",formatter: function (params) {console.log(JSON.stringify(params.data));return '<img src="/map/images/defult.png"/><dev>'+params.data.name+'</dev>';},},geo: {map: opt.mapName,roam: true,zoom: 1,scaleLimit: { //滚轮缩放的极限控制min: 1,max: 5},label: {normal: {show: true,textStyle: {color: '#fff'}},emphasis: {textStyle: {color: '#fff'}}},itemStyle: {normal: {borderColor: 'rgba(147, 235, 248, 1)',borderWidth: 1,areaColor: {type: 'radial',x: 0.5,y: 0.5,r: 0.8,colorStops: [{offset: 0,color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色}, {offset: 1,color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色}],globalCoord: false // 缺省为 false},shadowColor: 'rgba(128, 217, 248, 1)',// shadowColor: 'rgba(255, 255, 255, 1)',shadowOffsetX: -2,shadowOffsetY: 2,shadowBlur: 10},emphasis: {areaColor: '#389BB7',borderWidth: 0}},regions: opt.activeArea.map(function (item) {if (typeof item !== 'string') {return {name: item.name,itemStyle: {normal: {areaColor: item.areaColor || '#389BB7'}},label: {normal: {show: item.showLabel,textStyle: {color: '#fff'}}}}} else {return {name: item,itemStyle: {normal: {borderColor: '#91e6ff',areaColor: '#389BB7'}}}}})},// 设置覆盖物涟漪样式 effectscatterseries: [{type: 'effectScatter',coordinateSystem: 'geo',// symbol: 'diamond',showEffectOn: 'render',rippleEffect: {period: 15,scale: 6,brushType: 'fill'},hoverAnimation: true,itemStyle: {normal: {color: function (params) {return levelColorMap[params.value[3]];},shadowBlur: 10,shadowColor: '#333'}},data: handleEvents.initSeriesData(opt.data)}]};chart.setOption(option);// 添加点击事件chart.on('click', function (params) {var clickName = params.name;//console.log('区域被点击');var _self = this;// 一级到二级区块：每个区县区块添加点击事件if (opt.goDown && clickName !== name[idx]) {// 区域被点击if (cityMap[clickName]) {var url = cityMap[clickName];$.get(url, function (response) {/*console.log('区域被点击');console.log(response);*/curGeoJson = response;echarts.registerMap(clickName, response);if(upDownFlagArea){// 上钻至市var key;var arr = new Array();//循环所有的点信息，根据opt.data的name去geoCoordMap获取对应的name的点for(var ind=0;ind<opt.data.length;ind++){key = opt.data[ind].name;var pointTest = new BMap.Point(geoCoordMap[key][0],geoCoordMap[key][1]);if(BMapLib.GeoUtils.isPointInPolygon(pointTest,qcPoints)|| BMapLib.GeoUtils.isPointInPolygon(pointTest,gyPoints)|| BMapLib.GeoUtils.isPointInPolygon(pointTest,mcPoints)|| BMapLib.GeoUtils.isPointInPolygon(pointTest,lxPoints)){arr.push(opt.data[ind]);//console.info("在区域内")}}option.series[0].data=handleEvents.initSeriesData(arr);handleEvents.resetOption(chart, option, name);}else{var key;var arr = new Array();//循环所有的点信息，根据opt.data的name去geoCoordMap获取对应的name的点for(var ind=0;ind<opt.data.length;ind++){key = opt.data[ind].name;var pointTest = new BMap.Point(geoCoordMap[key][0],geoCoordMap[key][1]);var pointsData = qcPoints;if(clickName == '涡阳县'){pointsData = gyPoints;}else if(clickName == '蒙城县'){pointsData = mcPoints;}else if(clickName == '利辛县'){pointsData = lxPoints;}if(BMapLib.GeoUtils.isPointInPolygon(pointTest,pointsData)){arr.push(opt.data[ind]);//console.info("在区域内")}}option.series[0].data=handleEvents.initSeriesData(arr);handleEvents.resetOption(_self, option, clickName);}upDownFlagArea = !upDownFlagArea;});// 覆盖物被点击}else if(geoCoordMap[clickName]){alert('我被点击了:'+clickName);}}// 不下钻else{if(geoCoordMap[clickName]){alert('我被点击了:'+clickName);}}});chart.on('mousemove',function (params) {var moveName = params.name;var _option = chart.getOption();// 恢复所有数据为正常颜色并设置当前选中数据颜色var dataSeries = _option.series[0].data;for(var i=0;i<dataSeries.length;i++){for(var j=0;j<dataDa.length;j++){if(dataDa[j].name == dataSeries[i].name){dataSeries[i].value[3] = dataDa[j].level;break;}}if(dataSeries[i].name == moveName){dataSeries[i].value[3] = 4;}}// 设置地图比例_option.geo.zoom = _option.geo.zoom;chart.setOption(_option);});// 使用提示栏轮播插件tools.loopShowTooltip(chart, option, {loopSeries: true});//解决自适应window.addEventListener('resize', function () {chart.resize()})return chart;
};// 默认当前没有下钻
var upDownFlagArea = false;// 获取横纵坐标
function getMousePos(e) {var e = event || window.event;var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;var scrollY = document.documentElement.scrollTop || document.body.scrollTop;var x = e.pageX || e.clientX + scrollX;var y = e.pageY || e.clientY + scrollY;return {'x': x,'y': y};
}$(function () {$.getJSON(bozhou, function (geoJson) {echarts.registerMap('亳州', geoJson);var myChart = echarts.extendsMap('dper-chart-map', {bgColor: '#154e90', // 画布背景色mapName: '亳州',    // 地图名goDown: true,       // 是否下钻// 下钻回调callback: function (name, option, instance) {// 区块点击事件//console.log(name, option, instance);},// 数据展示data: dataDa});});
});// ---------------------------------------------------------------------------------echarts-auto-tooltip.js 开始--------------------------------------------------------------------------------
(function (global) {global.tools = global.tools || {};/***  echarts tooltip 自动轮播*  @author daLao*  @param chart*  @param chartOption*  @param options*  {*  interval    轮播时间间隔，单位毫秒，默认为2000*  loopSeries  boolean类型，默认为false。*              true表示循环所有series的tooltip，false则显示指定seriesIndex的tooltip*    seriesIndex 默认为0，指定某个系列（option中的series索引）循环显示tooltip，*              当loopSeries为true时，从seriesIndex系列开始执行.*  }* @returns {{clearLoop: clearLoop}}*/tools.loopShowTooltip = function (chart, chartOption, options) {var defaultOptions = {interval: 500,loopSeries: false,seriesIndex: 0,updateData: null};if (!chart || !chartOption) {return {};}var dataIndex = 0; // 数据索引，初始化为-1，是为了判断是否是第一次执行var seriesIndex = 0; // 系列索引var timeTicket = 0;var seriesLen = chartOption.series.length; // 系列个数var dataLen = 0; // 某个系列数据个数var chartType; // 系列类型var first = true;// 不循环series时seriesIndex指定显示tooltip的系列，不指定默认为0，指定多个则默认为第一个// 循环series时seriesIndex指定循环的series，不指定则从0开始循环所有series，指定单个则相当于不循环，指定多个// 要不要添加开始series索引和开始的data索引？if (options) {options.interval = options.interval || defaultOptions.interval;options.loopSeries = options.loopSeries || defaultOptions.loopSeries;options.seriesIndex = options.seriesIndex || defaultOptions.seriesIndex;options.updateData = options.updateData || defaultOptions.updateData;} else {options = defaultOptions;}// 如果设置的seriesIndex无效，则默认为0if (options.seriesIndex < 0 || options.seriesIndex >= seriesLen) {seriesIndex = 0;} else {seriesIndex = options.seriesIndex;}function autoShowTip() {function showTip() {// 判断是否更新数据if (dataIndex === 0 && !first && typeof options.updateData === "function") {options.updateData();chart.setOption(chartOption);}var series = chartOption.series;chartType = series[seriesIndex].type; // 系列类型dataLen = series[seriesIndex].data.length; // 某个系列的数据个数var tipParams = {seriesIndex: seriesIndex};switch (chartType) {case 'map':case 'pie':case 'chord':tipParams.name = series[seriesIndex].data[dataIndex].name;break;case 'radar': // 雷达图tipParams.seriesIndex = seriesIndex;tipParams.dataIndex = dataIndex;break;default:tipParams.dataIndex = dataIndex;break;}if (chartType === 'pie' || chartType === 'radar') {// 取消之前高亮的图形chart.dispatchAction({type: 'downplay',seriesIndex: options.loopSeries ? (seriesIndex === 0 ? seriesLen - 1 : seriesIndex - 1) : seriesIndex,dataIndex: dataIndex === 0 ? dataLen - 1 : dataIndex - 1});// 高亮当前图形chart.dispatchAction({type: 'highlight',seriesIndex: seriesIndex,dataIndex: dataIndex});}// 显示 tooltiptipParams.type = 'showTip';chart.dispatchAction(tipParams);dataIndex = (dataIndex + 1) % dataLen;if (options.loopSeries && dataIndex === 0 && !first) { // 数据索引归0表示当前系列数据已经循环完seriesIndex = (seriesIndex + 1) % seriesLen;}var _option = chart.getOption();// 恢复所有数据为正常颜色并设置当前选中数据颜色var dataSeries = _option.series[seriesIndex].data;for(var i=0;i<dataSeries.length;i++){for(var j=0;j<dataDa.length;j++){if(dataDa[j].name == dataSeries[i].name){dataSeries[i].value[3] = dataDa[j].level;break;}}if(i == (dataIndex-1)){dataSeries[i].value[3] = 4;}}// 设置地图比例_option.geo.zoom = _option.geo.zoom;chart.setOption(_option);first = false;}showTip();timeTicket = setInterval(showTip, options.interval);}// 关闭轮播function stopAutoShow() {if (timeTicket) {clearInterval(timeTicket);timeTicket = 0;if (chartType === 'pie' || chartType === 'radar') {// 取消高亮的图形chart.dispatchAction({type: 'downplay',seriesIndex: options.loopSeries ? (seriesIndex === 0 ? seriesLen - 1 : seriesIndex - 1) : seriesIndex,dataIndex: dataIndex === 0 ? dataLen - 1 : dataIndex - 1});}// 恢复所有数据为正常颜色var _option = chart.getOption();var dataSeries = _option.series[seriesIndex].data;for(var i=0;i<dataSeries.length;i++){for(var j=0;j<dataDa.length;j++){if(dataDa[j].name == dataSeries[i].name){dataSeries[i].value[3] = dataDa[j].level;break;}}}// 设置地图比例_option.geo.zoom = _option.geo.zoom;chart.setOption(_option);}}var zRender = chart.getZr();function zRenderMouseMove(param) {if (param.event) {// 阻止canvas上的鼠标移动事件冒泡param.event.cancelBubble = true;}stopAutoShow();}// 离开echarts图时恢复自动轮播function zRenderGlobalOut() {if (!timeTicket) {autoShowTip();}}// 鼠标在echarts图上时停止轮播chart.on('mousemove', stopAutoShow);zRender.on('mousemove', zRenderMouseMove);zRender.on('globalout', zRenderGlobalOut);autoShowTip();return {clearLoop: function () {if (timeTicket) {clearInterval(timeTicket);timeTicket = 0;}chart.off('mousemove', stopAutoShow);zRender.off('mousemove', zRenderMouseMove);zRender.off('globalout', zRenderGlobalOut);}};};
})(window);
// ---------------------------------------------------------------------------------echarts-auto-tooltip.js 结束--------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------地图全屏显示 开始--------------------------------------------------------------------------------
$(function () {// 双击：全屏显示$('#dper-chart-map').on('dblclick', function () {$('#bigDiv').toggleFullScreen();});
});/*** 基于jQuery FullScreen修改* 新增支持IE全屏显示* Copyright (c) 2019 ruoyi*/
(function(jQuery) {/*** Sets or gets the fullscreen state.** @param {boolean=} state*            True to enable fullscreen mode, false to disable it. If not*            specified then the current fullscreen state is returned.* @return {boolean|Element|jQuery|null}*            When querying the fullscreen state then the current fullscreen*            element (or true if browser doesn't support it) is returned*            when browser is currently in full screen mode. False is returned*            if browser is not in full screen mode. Null is returned if*            browser doesn't support fullscreen mode at all. When setting*            the fullscreen state then the current jQuery selection is*            returned for chaining.* @this {jQuery}*/function fullScreen(state){var e, func, doc;// Do nothing when nothing was selectedif (!this.length) return this;// We only use the first selected element because it doesn't make sense// to fullscreen multiple elements.e = (/** @type {Element} */ this[0]);// Find the real element and the document (Depends on whether the// document itself or a HTML element was selected)if (e.ownerDocument){doc = e.ownerDocument;}else{doc = e;e = doc.documentElement;}// When no state was specified then return the current state.if (state == null){// When fullscreen mode is not supported then return nullif (!((/** @type {?Function} */ doc["exitFullscreen"])|| (/** @type {?Function} */ doc["webkitExitFullscreen"])|| (/** @type {?Function} */ doc["webkitCancelFullScreen"])|| (/** @type {?Function} */ doc["msExitFullscreen"])|| (/** @type {?Function} */ doc["mozCancelFullScreen"]))){return null;}// Check fullscreen statestate = !!doc["fullscreenElement"]|| !!doc["msFullscreenElement"]|| !!doc["webkitIsFullScreen"]|| !!doc["mozFullScreen"];if (!state) return state;// Return current fullscreen element or "true" if browser doesn't// support thisreturn (/** @type {?Element} */ doc["fullscreenElement"])|| (/** @type {?Element} */ doc["webkitFullscreenElement"])|| (/** @type {?Element} */ doc["webkitCurrentFullScreenElement"])|| (/** @type {?Element} */ doc["msFullscreenElement"])|| (/** @type {?Element} */ doc["mozFullScreenElement"])|| state;}// When state was specified then enter or exit fullscreen mode.if (state){// Enter fullscreenfunc = (/** @type {?Function} */ e["requestFullscreen"])|| (/** @type {?Function} */ e["webkitRequestFullscreen"])|| (/** @type {?Function} */ e["webkitRequestFullScreen"])|| (/** @type {?Function} */ e["msRequestFullscreen"])|| (/** @type {?Function} */ e["mozRequestFullScreen"]);if (func){func.call(e);}return this;}else{// Exit fullscreenfunc = (/** @type {?Function} */ doc["exitFullscreen"])|| (/** @type {?Function} */ doc["webkitExitFullscreen"])|| (/** @type {?Function} */ doc["webkitCancelFullScreen"])|| (/** @type {?Function} */ doc["msExitFullscreen"])|| (/** @type {?Function} */ doc["mozCancelFullScreen"]);if (func) func.call(doc);return this;}}/*** Toggles the fullscreen mode.** @return {!jQuery}*            The jQuery selection for chaining.* @this {jQuery}*/function toggleFullScreen(){return (/** @type {!jQuery} */ fullScreen.call(this,!fullScreen.call(this)));}/*** Handles the browser-specific fullscreenchange event and triggers* a jquery event for it.** @param {?Event} event*            The fullscreenchange event.*/function fullScreenChangeHandler(event){jQuery(document).trigger(new jQuery.Event("fullscreenchange"));}/*** Handles the browser-specific fullscreenerror event and triggers* a jquery event for it.** @param {?Event} event*            The fullscreenerror event.*/function fullScreenErrorHandler(event){jQuery(document).trigger(new jQuery.Event("fullscreenerror"));}/*** Installs the fullscreenchange event handler.*/function installFullScreenHandlers(){var e, change, error;// Determine event namee = document;if (e["webkitCancelFullScreen"]){change = "webkitfullscreenchange";error = "webkitfullscreenerror";}else if (e["msExitFullscreen"]){change = "MSFullscreenChange";error = "MSFullscreenError";}else if (e["mozCancelFullScreen"]){change = "mozfullscreenchange";error = "mozfullscreenerror";}else{change = "fullscreenchange";error = "fullscreenerror";}// Install the event handlersjQuery(document).bind(change, fullScreenChangeHandler);jQuery(document).bind(error, fullScreenErrorHandler);}jQuery.fn["fullScreen"] = fullScreen;jQuery.fn["toggleFullScreen"] = toggleFullScreen;installFullScreenHandlers();})(jQuery);
// ---------------------------------------------------------------------------------地图全屏显示 结束--------------------------------------------------------------------------------

Echarts地图案例相关推荐

echarts地图下钻打点案例
<div id="china3" :style="{height:'700px',width:'100%',background:'#0b0518'}"& ...
echarts地图学习（使用geoJson数据绘制地图）
参考文档使用echarts完成中国省市区县镇地图展示 echarts地图(中国地图展示各省数据) echarts实现中国地图区域分布图 vue + echarts 利用echarts中的map地图中 ...
Echarts地图初体验
根据黑马pink老师的视频制作的echarts地图最近沉迷P社的钢4,断断续续几天才做好效果预览 echart拿来做这种动态图还是不错的官网百度的echarts 仓库地址链接: link. h ...
mysql+地图网格数据下载_echarts 中国各省市 echarts地图数据，含世界地图
[实例简介] echarts 中国各省市 echarts地图数据,含世界地图,含各省地市数据 [实例截图] [核心代码] echarts_map_data ├── anhui │ ├── anhu ...
Echarts地图详细镇区的划分_echarts乡镇地图,echarts地图街道-算法与数据结构文档
Echarts地图详细镇区的划分_echarts乡镇地图,echarts地图街道-算法与数据结构文档类资源-CSDN下载
echarts asp mysql 源码_如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)...
ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息.ECharts官网提供了中国地图.世界地图等地图数据下载,通过js引入或异步加载json文件的形式调用地图. 本文将结合实例 ...
echarts 地图常见效果
echarts 地图常见效果!! 引入echarts包(最全的那个,不要下简易版的)和地图包 ----------------------------------------------------- ...
vue 引入json地图_在vue2.x中使用echarts,地图或者theme引入js 文件，会有问题，地图的json文件重新注册可以...
One-line summary [问题简述] 在vue2.x中使用echarts,地图或者theme引入会有问题 import echarts from 'echarts/dist/echarts' ...
html海南地图插件,Echarts 地图（map）插件之鼠标HOVER和tooltip自定义数据
在项目开发中,有需要用到地图的地方,百度的echarts地图插件就是个不错的选择, 这里总结一下地图自定义鼠标HOVER时的事件和自定义tooltip数据: 一.鼠标HOVER时的事件: 参照官方文档 ...
Vue+Echarts地图消失（高度变成0）的完美解决方案
地图消失了! 最近项目突然发现了一个奇怪的问题,当且到别的页面之后停留一会(20min+),首页的Echarts地图就会消失掉,而且还不一定复现,好不容易复现了一次,查看元素发现地图的容器.svg元素 ...

Echarts地图案例

Echarts地图案例相关推荐

最新文章

热门文章