项目需要在省份地图上显示一条轨迹 并通过点击标记点弹窗显示详细内容
下面是效果图
<html lang="en">
<head>
<meta charset="utf-8">
<title>Echarts省级地图</title>
<style>
#mainMap{
position:absolute;
left: 0;
top:0
}
#mapMessage{
position:absolute;
right: 0;
top:0
}
</style>
</head>
<body style="background:#1B1B1B">
<!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
<!--Step:1 为ECharts准备一个具备大小（宽高）的Dom-->
<div id="mainMap" style="height:1100px;width: 100%;padding:10px;background:#fff">
</div>
<!--Step:2 Import echarts.js-->
<!--Step:2 引入echarts.js-->
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script src="js/echarts.js" charset="UTF-8"></script>
<script type="text/javascript">
$('#document').ready(function(){
getEcharts();
});
</script>
<script type="text/javascript">
function getEcharts(){
// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
require.config({
paths: {
echarts: './js'
}
});
// Step:4 require echarts and use it in the callback.
// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
require(
[
'echarts',
'echarts/chart/map'
],
function (ec) {
// --- 地图 ---
var myChart2 = ec.init(document.getElementById('mainMap'));
myChart2.on('click',function(param){
console.info(param)
})
myChart2.setOption({
dataRange: {
min : 0,
max : 100,
calculable : true,
color: ['#ff3333', 'orange', 'yellow','lime','aqua'],
textStyle:{
color:'#fff'
}
},
series : [
{
name: '河南',
type: 'map',
roam: true,
hoverable: false,
mapType: '河南',
itemStyle:{
normal:{
borderColor:'#fff',
borderWidth:0.5,
areaStyle:{
color: '#1b1b1b'
}
}
},
data:[],
markLine : {
smooth:true,
symbol: ['none', 'circle'],
symbolSize : 1,
itemStyle : {
normal: {
color:'#fff',
borderWidth:1,
borderColor:'rgba(30,144,255,0.5)'
}
},
data : [
],
},
geoCoord: {
'渠首':[112.629582,33.024584],
'叶县': [113.36328506469727,33.62455417303318],
'鲁山': [112.89997100830078,33.743469234152094],
'宝丰': [113.05824279785155,33.87155578708148],
'郏县':[113.242144,34.011048],
'禹州':[113.419865,34.15189],
'长葛':[113.671067,34.273039],
'新郑':[113.763073,34.452399],
'航空港区':[113.921739,34.522299],
'郑州':[113.57526,34.749795],
'荥阳':[113.478638,34.792398],
'穿黄':[113.255704,34.873867],
'温博':[113.120046,34.975269],
'焦作':[113.212658,35.214258],
'辉县':[113.773172,35.506663],
'卫辉':[113.980345,35.45027],
'鹤壁':[114.268945,35.750355],
'汤阴':[114.340915,35.932831],
'安阳':[114.357389,36.110282],
'穿漳':[114.24786,36.099167]
},
markPoint : {
symbol:'emptyCircle',
symbolSize : function (v){
return 10 + v/10
},
effect : {
show: true,
shadowBlur : 0
},
itemStyle:{
normal:{
label:{
show:false,
formatter:function(param){
return param.data.name
}
}
},
emphasis: {
label:{}
}
},
data : [
{name:'渠首',value:100},
{name:'叶县',value:95},
{name:'鲁山',value:90},
{name:'宝丰',value:85},
{name:'郏县',value:80},
{name:'禹州',value:75},
{name:'长葛',value:70},
{name:'新郑',value:65},
{name:'航空港区',value:60},
{name:'郑州',value:55},
{name:'荥阳',value:50},
{name:'穿黄',value:45},
{name:'温博',value:40},
{name:'焦作',value:35},
{name:'辉县',value:30},
{name:'卫辉',value:25},
{name:'鹤壁',value:20},
{name:'汤阴',value:15},
{name:'安阳',value:10},
{name:'穿漳',value:5}
]
}
},
{
name: '河南',
type: 'map',
mapType: '河南',
data:[],
markLine : {
smooth:true,
effect : {
show: false,
scaleSize: 1,
period: 30,
color: '#fff',
shadowBlur: 10
},
itemStyle : {
normal: {
label:{show:false},
borderWidth:1,
lineStyle: {
type: 'solid',
shadowBlur: 10
}
}
},
data : [
[{name:'渠首'}, {name:'叶县',value:100}],
[{name:'叶县'}, {name:'鲁山',value:95}],
[{name:'鲁山'}, {name:'宝丰',value:90}],
[{name:'宝丰'}, {name:'郏县',value:85}],
[{name:'郏县'}, {name:'禹州',value:80}],
[{name:'禹州'}, {name:'长葛',value:75}],
[{name:'长葛'}, {name:'新郑',value:70}],
[{name:'新郑'}, {name:'航空港区',value:65}],
[{name:'航空港区'}, {name:'郑州',value:60}],
[{name:'郑州'}, {name:'荥阳',value:55}],
[{name:'荥阳'}, {name:'穿黄',value:50}],
[{name:'穿黄'}, {name:'温博',value:45}],
[{name:'温博'}, {name:'焦作',value:40}],
[{name:'焦作'}, {name:'辉县',value:35}],
[{name:'辉县'}, {name:'卫辉',value:30}],
[{name:'卫辉'}, {name:'鹤壁',value:25}],
[{name:'鹤壁'}, {name:'汤阴',value:20}],
[{name:'汤阴'}, {name:'安阳',value:15}],
[{name:'安阳'}, {name:'穿漳',value:10}]
]
},
markPoint : {
symbol:'emptyCircle',
symbolSize : function (v){
return 0.1
},
effect : {
show: false,
shadowBlur : 0
},
itemStyle:{
normal:{
label:{show:true,
position:'top',
textStyle: {
fontSize: 14
},
formatter:function(param){
return param.data.name
}
}
},
emphasis: {
label:{show:true}
}
},
data : [
{name:'渠首',value:100},
{name:'叶县',value:95},
{name:'鲁山',value:90},
{name:'宝丰',value:85},
{name:'郏县',value:80},
{name:'禹州',value:75},
{name:'长葛',value:70},
{name:'新郑',value:65},
{name:'航空港区',value:60},
{name:'郑州',value:55},
{name:'荥阳',value:50},
{name:'穿黄',value:45},
{name:'温博',value:40},
{name:'焦作',value:35},
{name:'辉县',value:30},
{name:'卫辉',value:25},
{name:'鹤壁',value:20},
{name:'汤阴',value:15},
{name:'安阳',value:10},
{name:'穿漳',value:10}
]
}
}
]
});
});
}
</script>
</body>
</html>
提示 坐标点 可以通过百度地图公共平台获取
导入的map.js 为全国地图 只需修改省份名称即可变更相应的省份地图
项目测试地址:
链接：https://pan.baidu.com/s/1Ngx1XV9R6I_sWX8cpM8XLw
提取码：jd8s
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
