3分钟开发地图应用

本文从0到1以循序渐进的方式利用低代码平台搭建出常见的地图展示应用，让您快速上手低代码平台核心功能。

以下开发地图应用分为四步：
(1)创建数据模型 -> (2)创建编辑应用-> (3)发布应用

第一步：创建数据模型

我们可以在数据模型中添加或编辑地图应用所需的模型字段，创建步骤如下：

1.进入低代码控制台 > 数据模型管理页面。
2.点击新建模型。

3.上传数据模型需要的数据字段，可根据提供的数据参考模版再做修改，以实现一个基础的地图辐射圈数据存储为例，我们需要创建3个字段，分别对应表单中的纬度、经度以及辐射圈半径，如下图。

4.上传数据字段成功后，可以预览上传的数据更改数据类型，我们把radius更改成数字类型，如下图。

5.点击完成后，数据模型即可创建完成，点击编辑数据模型可以查看增删改查方法的使用方式，如下图。

第二步：创建编辑应用

1.创建空白应用，可参考创建应用。

2.编辑应用，我们可以在画布中拖入地图组件，再点击增加一个地图辐射圈图层，如下图。

3.拖入容器组件调整定位、边距等样式后，容器中并列拖入文本组件，完成一个后可通过复制组件功能完成布局相同的组件，如下图。

4.给文本绑定变量，查询模型数据后通过修改变量值页面内容可随之改变，如下图。

5.在代码编辑器中查询上传的数据模型，需要注意使用了async/await 需要在函数前加上 async 标识，如下图。

const result = await $app.dataSource.callModel({
    name: '替换对应的数据模型标识', // 数据模型标识
    methodName: 'xhSearch', // 查询方法标识
  });

6.获取数据成功后更改变量，页面内容也会随之变化，对应字段可打印查看或在数据模型管理中查看，如下图。

7.返回预览区域即可查看效果，如下图。

第三步：发布应用

1.发布应用，可参考发布应用。

2.发布成功后可通过链接或二维码扫码查看效果，如下图。