加油站小程序实战教程07城市管理

引言

在《加油站小程序实战教程06地图多站点显示》中，我们已经实现了城市切换并且显示多站点信息。目前这些内容是硬编码在程序中的，为了方便日后维护数据的便利性，我们需要提供后台功能进行数据管理，本篇我们介绍一下搭建的过程。

1 创建数据源

有的加油站是集团化经营，网点遍布全国，为此我们需要创建一个城市的数据源用来管理数据。点击云数据库，点击添加模型

输入模型名称城市表，输入模型标识Ctiy

添加第一个字段，城市名称，类型选择文本

添加第二个字段，经度，类型选择数字

添加第三个字段，纬度，类型选择数字

添加第四个字段，序号，类型选择数字

城市有了之后，我们的站点信息要和城市进行关联，在站点表里添加关联字段，关联到城市表

2 开发后台功能

表搭建好了之后，我们就需要开发后台功能，打开我们的后台应用

点击创建页面的图标

选择城市表，选择左侧导航布局

选中数据表格组件，按照序号进行排序

设置筛选器，勾选城市名称作为查询条件

切换到布局设计，选择左侧导航布局，配置菜单

添加城市管理的列表页作为菜单

配置好菜单之后，先录入一条数据

在数据表格的操作列，添加一个按钮，改为获取经纬度

3 创建API

我们的经纬度需要通过高德地图的API进行获取，切换到APIs，点击创建

选择http请求

添加方法的名称和标识

配置URL，入参，以及Query

https://restapi.amap.com/v3/geocode/geo

配置好了之后点击方法测试，成功之后，点击出参映射

4 开发获取经纬度功能

经纬度更新的时候我们先需要创建一个自定义方法，点击代码区新建javascript方法

输入如下代码

bash 复制代码

export default async function({event, data}) {
   const city = data.target.name
   const id = data.target._id
   const result = await $w.cloud.callDataSource({
        dataSourceName: 'getCityLocation_scahxg5',
        methodName: 'getCityLocation',
        params: {
          address:city
        }, // 方法入参
    });
    console.log(result)
    const longitude = result.geocodes[0].location.split(",")[0]
    const latitude = result.geocodes[0].location.split(",")[1]
    console.log(longitude,latitude)
    await $w.cloud.callDataSource({
      dataSourceName: "City", // 数据模型标识
      methodName: "wedaUpdateV2",
      params: {
        "data": {
          "longitude": longitude,
          "latitude": latitude
        },
        "filter": {
          "where": {
            "$and": [
              {
                "_id": {
                  "$eq": id
                }

              }
            ]
          }
        },
      }
    });

    $w.table1.refresh()

}

代码的逻辑是，我们先调用API，获取到城市的经纬度，然后再更新当前数据的经纬度字段，之后刷新表格

自定义方法做好之后，给按钮绑定点击事件，调用我们的方法，并且传入入参

最终效果

当点击操作列的获取经纬度按钮的时候，会自动把信息更新到当前数据

总结

本篇我们介绍了如何借助高德地图的API来自动更新城市的经纬度功能，灵活使用API可以极大提高软件的易用性。过去我们说打点的时候借助地图拾取工具，现在就可以直接调用地图API还是比较方便的。