# 地图

来源快照：`result_data_new_260518.json`

- 来源 ID：`1184673729708441739`
- 模块：低代码平台e-builder
- 目录：页面引擎 - 页面设计器 - 页面组件 - 基础组件 - 基础组件/数据展示类
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

# 地图

一、

## 功能背景及价值用途

为客户提供常用的地图场景需求，如基础的地图功能、位置搜索功能，此外还提供了在地图上绘制标记点的功能满足在地图上显示和统计客户数据、资产信息等功能。

地图通过集成系统中的数据源实现在地图上绘制中心点、附加点、连线、地点搜索等功能，可以快速的搭建一些通用的地图场景。

二、

## 功能概述及使用说明

在【页面】-【组件】中搜索【地图】，或者在【模块组件/地图】可以拖入模块页面组件。点击【地图】组件，在右侧配置面板中可以对中心点、附加点、附加点列表、连线等设置项进行设置。

 

一、

【标题设置】用于设置组件左上角展示的标题内容

二、

【中心点设置】用来设置地图渲染时展示的初始位置

三、

【附加点设置】使用数据源中的数据在地图上绘制标记点，可以进行条件过滤、基于中心点范围筛选， 还可以配置附加点显示的内容和点击事件、点击附加点内容会展示附加点详情，附加点详情页也支持配置显示内容。

四、

【附加点列表】可以在地图上显示附加点的数据列表，支持配置显示内容。

五、

【连线设置】可以对显示在地图上的标记点进行连线。

六、

【位置搜索】支持配置位置搜索的类型，可以分别配置按中文地址搜索和按经纬度搜索。

### 1\. 标题设置

用于配置标题内容和图标，开启启用标题开关才会显示，可以配置标题内容和图标，配置成功后会显示在组件的左上方。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160551278036189322&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### 2、中心点设置

中心点可以设置具体位置、当前位置、全国、和自定义位置四种， 设置成功后，地图在初始显示的时候会以该位置为中心，并显示红色的中心点标记。

 

**3、具体位置**

中心点设置为具体位置的时候，下面的输入框可以填写中文地址和经纬度两种格式，

1). 中文地址格式

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160549985055997988&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

一、

经纬度格式

在获取到经纬度之后按照‘经度,维度’的格式配置到输入框中，同时还要设置经纬度的类型。

经纬度类型分为百度、高德/腾讯、GPS三种类型，不同地图的坐标系是不同的，需要根据经纬度的来源设置经纬度格式，即如果这个经纬度是从高德地图获取的，这里就要设置为“高德/腾讯”，高德和腾讯使用的同一个坐标系。  
  
 

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550521943687231&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

二、

当前位置

中心点设置为当前位置的时候会获取用户的当前位置作为地图的中心点。

三、

全国

当中心点设置为全国的时候，会设置地图的层级为世界级别，并获取中国地图的中心作为中心点。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160549847672733769&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

四、

自定义位置

获取用户的当前位置作为地图初始化显示的中心点，当用户点击地图的时候会把点击的位置设置为中心点。

 

### 3、中心点标记设置

中心点标记可以设置默认标记、不显示标记、自定义标记三种类型，当设置默认标记的时候中心点会在地图上显示下图中红色的标记，当设置不显示标记的时候则不会在地图上显示中心点标记，当选择自定义标记的时候用户可以选择自定义的图标作为中心点标记在地图上显示。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160549985055998059&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### 4、附加点设置

打开启用附加点开关之后才显示附加点相关的配置。

 

一、

设置数据源

数据源设置之后，会读取数据源中的字段在地图上绘附加点标记以及标记点内容，在设置完数据源之后，才能设置名称字段、详情字段等。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550191384297548&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

二、

名称字段

名称字段用来设置附加点的显示内容

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550895563071617&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

三、

详情字段

详情字段用来设置点击附加点之后展示的内容

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160549804624601213&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

 

 

四、

获取位置方式

用于读取数据源中的经纬度，可以设置按位置字段、按经纬度字段两种。

 

 当设置按位置字段的时候同时还需要设置位置字段。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160551256485855268&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

当设置按经纬度字段的时候还需要设置经度字段、纬度字段以及坐标类型。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550706710339644&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

五、

显示范围设置

设置了显示范围之后会进行数据过滤，以地图的中心点为圆心，显示范围为半径画圆，在地图上只显示在这之内的附加点标记。

 

六、

过滤条件设置

设置后会对附加点数据进行条件过滤，在地图上只显示满足条件的附加点标记。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160549813234237468&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

七、

相同点位置合并

当有多个点的坐标相同的时候，附加点数据显示就会重合，开启相同点合并可以解决这个场景问题。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550255820456039&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

八、

开启点聚合

开启点聚合可以解决大量数据点卡顿的问题，距离比较近的点会被合并到聚合点，点击聚合点显示具体的附加点数据。

 

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550363035254947&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

### 5、附加点列表设置

一、

“显示附加点列表数据” 是列表的总开关，开启后才会显示列表的相关配置。

二、

“列表字段”用来设置列表的显示内容。

三、

“列表位置”用来设置列表的显示位置，可以设置为地图左侧、地图右侧。

四、

“每页行数”和“分页模式”用来设置地图的分页模式和每一页的显示数量，分页模式可以设置为页码分页、点击加载更多、滚动分页、不分页。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160549727357960224&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### 6、连线设置

连线设置可以将地图上显示的附加点标记进行连线、可以设置为“点与点之间连线”、“按步行规划路线连线”、“按驾车规划路线连线”三种连线方式。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160549791947210777&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

### 7、比例尺

该设置影响地图的初显示层级，比例尺越大展示的地图范围就越大，比例尺越小展示的地图范围越小，地图图层信息就更加详细。比如比例尺10km的时候地图显示城市信息、比例尺设置500m的时候显示街道、小区楼栋。

 

### 8、点击时展示信息

开关开启之后，当点击地图的时候会展示该位置的信息。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160551419658960951&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

### 9、搜索设置

地图搜索用来搜索地点，分为按地址搜索和按经纬度搜索，开启后会在地图的左上方显示。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160550363035254841&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

## 三、场景案例

1.

基础地图功能

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160551282161287248&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

2.在地图中展示客户信息，配置数据源为CRM业务模块的客户数据

 

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160551088980033605&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

## 四、使用注意点

当配置“按位置字段”获取经纬度的时候，标记点的渲染可能会出现问题，因为需要将中文地址调用地图的逆地理位置API解析成经纬度，该API存在并发和流量限制

## 五、上下游关联功能点

1.

数据源的数据来自业务模块的数据（比如CRM客户数据）、EBuilder表单的数据、数据加工的数据。

2.

默认显示的地图（百度、高德、腾讯、谷歌）以及地图的加载使用的key读取的是【后台管理中心】-【通用设置】-【地图设置】中配置的数据。
