若需要完整项目代码，可点我前往下载。
项目介绍
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>
js
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]];
// style
var 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);
},
// 设置 覆盖物对象 effectscatter
initSeriesData: 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'
}
}
}
}
})
},
// 设置覆盖物涟漪样式 effectscatter
series: [{
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无效，则默认为0
if (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
});
}
// 显示 tooltip
tipParams.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 selected
if (!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 null
if (!((/** @type {?Function} */ doc["exitFullscreen"])
|| (/** @type {?Function} */ doc["webkitExitFullscreen"])
|| (/** @type {?Function} */ doc["webkitCancelFullScreen"])
|| (/** @type {?Function} */ doc["msExitFullscreen"])
|| (/** @type {?Function} */ doc["mozCancelFullScreen"])))
{
return null;
}
// Check fullscreen state
state = !!doc["fullscreenElement"]
|| !!doc["msFullscreenElement"]
|| !!doc["webkitIsFullScreen"]
|| !!doc["mozFullScreen"];
if (!state) return state;
// Return current fullscreen element or "true" if browser doesn't
// support this
return (/** @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 fullscreen
func = (/** @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 fullscreen
func = (/** @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 name
e = 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 handlers
jQuery(document).bind(change, fullScreenChangeHandler);
jQuery(document).bind(error, fullScreenErrorHandler);
}
jQuery.fn["fullScreen"] = fullScreen;
jQuery.fn["toggleFullScreen"] = toggleFullScreen;
installFullScreenHandlers();
})(jQuery);
// ---------------------------------------------------------------------------------地图全屏显示 结束--------------------------------------------------------------------------------
633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
