基于Echarts和百度地图的HTML插件
程序员文章站
2022-05-31 16:48:33
...
基于Echarts和百度地图的HTML插件
代码实现了最基本的显示地图功能，另外实现了坐标标识，点击出现弹出框以及地点的经纬度等。
地图样式可以使用json配置
源码以及需要使用的js文件（bmap.js等），css文件等点击此处下载
双击map.html即可直接使用，代码清晰易懂，展示效果在文末显示。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<!-- 下方的这条API，ak参数后面的**需要自己去官网申请http://lbsyun.baidu.com -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=此处请替换为自己的授权码，附件会提供我私人的授权码"></script>
<script src="./jquery.js"></script>
<script src="./echarts.js"></script>
<script src="./bmap.js"></script>
<script type="text/javascript" src="./styleJson.json"></script>
<script src="./BMapLib.js"></script>
<script src="./jquery.range.js"></script>
<link rel="stylesheet" href="./jquery.range.css">
<style type="text/css">
body, html,#main {width: 900px;height: 650px;overflow: hidden;margin:0;font-family:"微软雅黑";}
.small-box>.inner{padding:10px}.small-box>.small-box-footer{position:relative;text-align:center;padding:3px 0;color:#fff;color:rgba(255,255,255,0.8);display:block;z-index:10;background:rgba(0,0,0,0.1);text-decoration:none}
.touming{background:url("background.png") no-repeat}
.biankung{border:1px solid white}
.ne-range_thumb,input.ne-range[type=range]::-webkit-slider-thumb { width: 2em; height: 2em; border-radius: 50%; border: 0/**1px solid #45bd5c*/; background-color: #5cdf84; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.21); -webkit-transition: border-color 0.15s, background-color 0.15s; transition: border-color 0.15s, background-color 0.15s; cursor: pointer; background-clip: padding-box; box-sizing: border-box;
}.ne-range_thumb:active,input.ne-range[type=range]::-webkit-slider-thumb:active { border: 0/**1px solid #45bd5c*/; background-color: #5cdf84;
}.ne-range_track,input.ne-range[type=range] { width: 50%; height: 8px; border-radius: 8px; margin: .8em 0; padding: 0; cursor: pointer; border: 0; /**background-color: #45bd5c;*/
background: -webkit-linear-gradient(#40c35f, #40c35f) no-repeat #cccccc; background-size: 0% 100%;
}.ne-range_track > span { display: block; width: 0%; height: 100%; background-color: #40c35f;
}.ne-range_tips { position: absolute; margin-top: -2em; width: 6em; text-align: center; margin-left: -3em;
}.ne-range_thumb > .ne-range_tips { margin-left: -2.15em;
}.ne-range_tips > span { position: relative; display: inline-block; padding: 0 3px; min-width: 1.2em; color: white; background: rgba(0, 0, 0, 0.5); border-radius: 3px; text-align: center;
}.ne-range_tips > span::after { content: ''; position: absolute; left: 50%; bottom: -0.25em; margin-left: -0.3em; border: 0.3em solid rgba(0, 0, 0, 0.5); border-right-color: transparent; border-left-color: transparent; border-bottom: 0;
}/*Real Range*/input.ne-range[type=range] { position: relative; outline: 0; -webkit-appearance: none !important;
}input.ne-range[type=range]::-webkit-slider-thumb { -webkit-appearance: none !important;
}/*Virtual Range*/.ne-range { display: inline-block; position: relative; width: 100%; font-size: 0.5em;
}.ne-range_thumb { position: absolute; top: 0; margin-left: -0.85em;
}.ne-range_thumb.ondrag > .ne-range_tips { visibility: visible;
}
.amount{BACKGROUND-COLOR: transparent;border:0; border-bottom:1px solid #ccc;width:50px;height:20px;margin-left:10px;font-size:22px;color:#66ffff;text-align:center}
</style>
<title>地图展示</title>
</head>
<body>
<div id="main"></div>
</body>
<script>
var myChart = echarts.init(document.getElementById('main'));//初始化echarts
var geoCoordMap = {
'青海省，海西蒙古族藏族自治州，格尔木市':[94.595216,35.963987],
'陕西省，宝鸡市，凤县':[106.884611,34.02625],
'江西省，宜春市，靖安县':[114.99458,28.936338],
'湖南省，长沙市，浏阳市':[113.397254,28.189233],
'湖北省，咸宁市，通山县':[114.353913,29.613899]
};//从后台获取的数据，以JSON的形式push进这里，现在的数据是样式数据(注意地址使用中文逗号隔开)
var data = [
{name:'青海省，海西蒙古族藏族自治州，格尔木市',value:6},
{name:'陕西省，宝鸡市，凤县',value:5},
{name:'江西省，宜春市，靖安县',value:3},
{name:'湖南省，长沙市，浏阳市',value:4},
{name:'湖北省，咸宁市，通山县',value:5}
];//从后台获取的数据，以数组的形式push进这里，现在的数据是样式数据(注意地址使用中文逗号隔开)
var convertData = function (data) {//地址数据转化
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
var option = {
bmap: {
center: [104.603346, 37.679653],//中心坐标
zoom: 5,//放大倍数
roam: true,//开启鼠标缩放和平移漫游
mapStyle: styleJson//地图样式
},
tooltip : {
trigger: 'item',
position: "right",//tootip位置
formatter: function (params, ticket, callback) {
return params.marker + params.name + ", " + params.value[2] + "级"
}
},
series: [{
type: 'effectScatter',
coordinateSystem: 'bmap',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 6)),
symbolSize: function (val) {//地震标记的大小
return val[2] * 3;
},
showEffectOn: 'render',//标记样式，目前为雷达
rippleEffect: {//涟漪特效相关配置
brushType: 'stroke'//波纹的绘制方式
},
itemStyle: {//标记的属性
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1,
}]
}
myChart.setOption(option);//应用设置
var bmap = myChart.getModel().getComponent('bmap').getBMap();//初始化bmap
bmap.disableDoubleClickZoom();//禁用双击放大
window.lastInfoBox = null;//定义上一个窗体为lastInfoBox;
var name;
function postParam(lng,lat,postname){//在这向后台传参
var quikLevel = $("#slider").val();//震级
// alert(name+","+e.point.lng+","+e.point.lat+","+quikLevel)
alert(lng+","+lat+",'"+postname+"',"+quikLevel);
}
function showInfo(e){
var point = new BMap.Point(e.point.lng,e.point.lat)//实例化点坐标
var gc = new BMap.Geocoder();//实例化地址解析器，用于之后的传坐标找地址
gc.getLocation(point, function(rs){//根据点，找地址
var addComp = rs.addressComponents;
name = addComp.province + "，" + addComp.city + "，"+ addComp.district;
var info= "<div class='small-box bg-green'>"+
"<div class='inner'>"+
"<h4 style='color:#66ffff;margin:0px'>经度："+e.point.lng+"</br>纬度："+ e.point.lat +"</h4>"+
"<p style='color:#66ffff;margin:0px'>参考地址："+name+"</p>"+
"<div style='color:#66ffff'><span>震级：</span><input type='range' id='slider' name='slider' class='ne-range' value='0'/><input id='amount' name='amount' class='amount' type='number'></div>"+
"</div>"+
"<a href='#' οnclick=\"postParam("+ e.point.lng +","+ e.point.lat + ",'" + name + "')\" class='small-box-footer'>提交</a>"+
"</div>";
var infoBox = new BMapLib.InfoBox(bmap,info,{//定义消息框
boxStyle:{//消息框样式
width: "240px",
Height: "0px",
marginBottom: "35px",
marginleft:"6px",
},
closeIconMargin: "4px 4px 4px 4px",//关闭按钮距离右上角位置
closeIconUrl: "./close.png",//关闭按钮样式
enableAutoPan: false,
align: INFOBOX_AT_TOP
});
var marker = new BMap.Marker(point);//实例化标记
var allOverlay = bmap.getOverlays();//获取当前地图上所有的覆盖物
if(lastInfoBox){//判断之前是否有一个窗口打开，如果有，则关闭之前的窗口
lastInfoBox.close();
}
lastInfoBox = infoBox;
infoBox.open(point);//在该点上打开消息框
bmap.addOverlay(marker);//在地图上标记
infoBox.addEventListener("close", function(e) {//判断，如果有窗口关闭，则移除标记
marker.remove();
});
$(".infoBox").addClass("touming biankung")
//以下为滑动条的配置
$.fn.RangeSlider = function (cfg) {
this.sliderCfg = {
min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null,
max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
step: cfg && Number(cfg.step) ? cfg.step : 0.1,
callback: cfg && cfg.callback ? cfg.callback : null
};
var $input = $(this);
var min = this.sliderCfg.min;
var max = this.sliderCfg.max;
var step = this.sliderCfg.step;
var callback = this.sliderCfg.callback;
$input.attr('min', min)
.attr('max', max)
.attr('step', step);
$input.bind("input", function (e) {
$input.attr('value', this.value);
$input.css('background-size', this.value * 1.0 / max + '% 100%');
if ($.isFunction(callback)) {
callback(this);
}
});
};
var change = function ($input) {
$("#amount").val($input.value);
}
$('#amount').bind("input", function (e) {
var value = 0;
if (/^[1-9][0-9]*/.test(this.value)) {
value = this.value;
}
if (this.value > 10) {
value = 10;
$("#amount").val(10);
}
$("#slider").val(value).css('background-size', value * 1.0 / 10 + '% 100%');
});
$('#slider').RangeSlider({ min: 0, max: 10, step: 0.1, callback: change });
});
}
bmap.addEventListener("click", showInfo);//点击事件，出现窗口
</script>