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

发布于:2025-03-07 ⋅ 阅读:(18) ⋅ 点赞:(0)

引言

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

1 创建数据源

有的加油站是集团化经营,网点遍布全国,为此我们需要创建一个城市的数据源用来管理数据。点击云数据库,点击添加模型
在这里插入图片描述
输入模型名称城市表,输入模型标识Ctiy
在这里插入图片描述
添加第一个字段,城市名称,类型选择文本
在这里插入图片描述
添加第二个字段,经度,类型选择数字
在这里插入图片描述
添加第三个字段,纬度,类型选择数字
在这里插入图片描述
添加第四个字段,序号,类型选择数字
在这里插入图片描述
城市有了之后,我们的站点信息要和城市进行关联,在站点表里添加关联字段,关联到城市表
在这里插入图片描述

2 开发后台功能

表搭建好了之后,我们就需要开发后台功能,打开我们的后台应用
在这里插入图片描述
点击创建页面的图标
在这里插入图片描述
选择城市表,选择左侧导航布局
在这里插入图片描述
选中数据表格组件,按照序号进行排序
在这里插入图片描述
设置筛选器,勾选城市名称作为查询条件
在这里插入图片描述
切换到布局设计,选择左侧导航布局,配置菜单
在这里插入图片描述
添加城市管理的列表页作为菜单
在这里插入图片描述
配置好菜单之后,先录入一条数据
在这里插入图片描述
在数据表格的操作列,添加一个按钮,改为获取经纬度
在这里插入图片描述

3 创建API

我们的经纬度需要通过高德地图的API进行获取,切换到APIs,点击创建
在这里插入图片描述
选择http请求
在这里插入图片描述
添加方法的名称和标识
在这里插入图片描述
配置URL,入参,以及Query
在这里插入图片描述

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

配置好了之后点击方法测试,成功之后,点击出参映射
在这里插入图片描述

4 开发获取经纬度功能

经纬度更新的时候我们先需要创建一个自定义方法,点击代码区新建javascript方法
在这里插入图片描述
输入如下代码

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还是比较方便的。