1.1 问题描述

我们在日常使用地图过程中，通常会遇到地图标签，提示点等显示不满足我们的需求，需要进行自定义。

例如：在使用地图过程中，我们会发现很多地名显示的位置偏离。这时候我们都需要使用自定义功能进行调控。

下面以黑龙江和内蒙古为例，调整后的效果如下，标签位置正确，提示采用了自定义格式：

1.2 实现思路

使用自定义标签格式中的【HTML 解析文本内容】，来实现地图标签和提示点位置自定义。

2.1 新建地图

新建决策报表，拖入地图组件，地图边界选择区域地图下的中国，如下图所示：

2.2 数据准备

新建工作薄，添加数据集 ds1：SELECT * FROM 地图1，选中图表，选择图表属性表-数据，如下图所示：

2.3 基础样式设置

选择图表属性表- 样式>图例，形态设为区域段，主题颜色设为绿色，标签选择数字格式，如下图所示：

选择图表属性表- 样式>系列，边框设为蓝色，如下图所示：

2.4 自定义 JS 显示标签

选择图表属性表-样式>标签，内容选择自定义，如下图所示：

JS 代码如下：

function() {
	var points = this.points;
	var total = '<div style="width:100%;height:100%;">';
	if (this.name == "内蒙古自治区") {
		total += '<div align=center style="margin-top:30px"><span style = "font-size:25px;color:' + FR.contentFormat(points[1].value, '') + '">' + FR.contentFormat(points[2].value, '#0.00') + '</span>' + this.name + '</div>';
	} else if (this.name == "黑龙江省") {
		total += '<div align=center style="margin-top:100px;"><span style = "font-size:25px;color:' + FR.contentFormat(points[1].value, '') + '">' + FR.contentFormat(points[2].value, '#0.00') + '</span>' + this.name + '</div>';
	} else {
		total += '<div align=center ><span style = "font-size:25px;color:' + FR.contentFormat(points[1].value, '') + '">' + FR.contentFormat(points[2].value, '#0.00') + '</span>' + this.name + '</div>';
	}
	for (var i = 0, len = points.length - 2; i < len; i++) {
		total += ('<div  align=center>' + FR.contentFormat(points[i].value, '#0.00') + '</div>');
	}
	total += '</div>';
	return total;
}

div align=center style="margin-top当读取名字为内蒙古自治区时候，我们进行margin显示位置的调整，使其不显示偏离

FR.contentFormat(value, '#.##%')进行数值格式自定义，后面的'#.##%'可以根据实际需求进行更改

this.points这个参数在地图中使用时表示同一个区域上的不同的系列的点

其他标签自定义格式还可参考 标签自定义

2.5 自定义 JS 显示提示点

选择图表属性表-样式>提示，内容选择自定义，如下图所示：

JS 代码如下：

function() {
	var points = this.points;
	var total = '<div style="width:100%;background - color: #808080;color:white">';
	total += '<div align=left style = "font-size:16px" > ' + this.name + ' < /div>';
	for (var i = 0, len = points.length - 1; i < len; i++) {
		total += '<div align=left style = "font-size:13px" > ●' + points[i].seriesName + ': ' + FR.contentFormat(points[i].value, '') + '</div>';
	}
	return total;
}

此处做一个简单的循环，循环展示我们前端设置的参数，并对参数做单独的处理，包括控制字体大小，以及显示格式

其他提示点自定义格式还可参考 提示点自定义

点击分页预览，效果如下图所示：

注：不支持移动端

已完成模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\frm\地图标签和提示点位置自定义.frm

点击下载模板：地图标签和提示点位置自定义.frm