本文介绍如何在JSP环境中利用ECharts实现地图动态标记。核心在于通过geoCoord对象存储经纬度坐标，并在series中配置markPoint。通过Ajax获取数据后，动态更新geoCoord与markPoint.data数组，最后调用setOption刷新图表，实现实时点位展示。
ECharts地图类型实现概述
ECharts能够便捷地在网页端渲染地图及各类图表，并支持图像下载、缩放及拖拽交互。本文重点解析地图类型（type: 'map'）的具体实现机制。
首先，需在ECharts配置中定义geoCoord属性，该属性为JavaScript字典对象，由键值对构成。键名代表点位名称，值为包含经纬度的数组，例如[136.00, 32.00]即表示一个具体坐标点。
地图图表关键配置元素
在配置地图类型图表时，需关注以下关键元素：
title：用于设置标题，显示地图所代表的名称。
title: {
text: '清大云点亮中国',
subtext: 'Tsingda.Cloud',
sublink: 'http://www.eee114.com',
x: 'center',
y: 'top',
textStyle: {
color: '#fff'
}
}
toolbox：配置工具栏，提供放大、缩小、查看数据视图及下载图像等功能。
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
}
legend：图例显示组件。当series包含多个地图系列时，该配置用于展示各系列的图例，支持横向或纵向排列。
legend: {
x: 'left',
y: 'top',
data: ['在线', '离线'],//在线和离线对应的是series的名字
selectedMode: false,//选中悬浮
textStyle: {
color: '#fff'
}
}
series：地图显示系列配置，用于叠加显示地图。可定义多个series，渲染层级上前者覆盖后者，即第一个series位于最顶层。
series: [
//默认
{
name: '底层模版',
type: 'map',
mapType: 'china',
data: provinceMap,
geoCoord: source,
itemStyle: {
normal: {
color: bgColor,
borderColor: "#eee",
label: {
show: true,
textStyle: {
color: "#fff"
}
}
}, emphasis: { color: "rgba(128, 128, 128, 0.5)" }
},
}
markPoint：点标识配置，用于在地图上标记特定点。这些点的数据通常存储在geoCoord对象中，该对象为字典结构，前文已作介绍。
markPoint: {//动态标记
large: true,//这个选项，悬浮自动失效
symbolSize: 2,
itemStyle: {
normal: {
shadowBlur: 2,
shadowColor: 'rgba(37, 140, 249, 0.8)',
color: onColor
}
},
data: []
}
markPoint中的data对象指定地图上需显示的点，其为字符串数组，存储geoCoord中对应的键名。
setOption：将配置好的地图对象应用至指定的图表实例上。
var myChart = echarts.init(document.getElementById('main'));
var option={};
myChart.setOption(option);动态构建地图标记点
动态构建地图上的点标识markPoint
基本思路是将待标记的点数据动态赋值给geoCoord及markPoint的data对象，从而实现在地图上动态标示点位。
$.get("/map/GetOffMap", function (data) {
for (var i in data) {
option.series[0].geoCoord[data[i].longitude + "_" + data[i].latitude] = [parseFloat(data[i].longitude), parseFloat(data[i].latitude)];
option.series[1].markPoint.data.push({ name: data[i].longitude + "_" + data[i].latitude });
}
myChart.setOption(option);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。