echarts地图文字重叠解决方案_ECharts 和百度地图的叠加示例（下）

前言

汇总了几个 ECharts 地图和百度地图在可视化展示时的综合示例。

主要是在 ECharts 地图和百度地图上叠加展示一些数字、图片、其它图表和轨迹动画。

另外因为每个示例的代码配置项比较繁琐，这里只贴核心代码。

BaiduMap 叠加带数字的气泡

核心配置

定义一个函数 addMarker(函数名称随意)，传入参数百度地图 Point 类的实例，及 Label 类的实例

循环遍历各省份数据，根据 geoCoordMap 中的经纬度生成百度地图 Point 类的实例 point,创建 Label 类的实例用来显示各省分的数据。

循环调用 addMarker 方法。

// 百度地图API功能

var map = new BMap.Map("map");

// 编写自定义函数,创建标注

function addMarker(point, label){

var marker = new BMap.Marker(point);

map.addOverlay(marker);

marker.setLabel(label);

}

var geoCoordMap = {

黑龙江: [127.9688, 45.368],

// 省略若干...

};

// 遍历各省数据，根据省份名称对应的经纬度生成point和label

Object.keys(geoCoordMap).forEach(function(key){

var point = new BMap.Point(geoCoordMap[key][0], geoCoordMap[key][1]);

var label = new BMap.Label(key + Math.round(Math.random() * 100), {

offset: new BMap.Size(-10, -20),

});

addMarker(point, label);

});

复制代码

BaiduMap 叠加图片

核心配置

创建 Icon 类，并传入图片地址，得到自定义的图形标注

创建 Marker