小程序首页的设备列表按经纬度拉取，golang mysql 实现

经纬度的存储类型

latitude: 37.538155,    
longitude: 121.390169,

可见，最多有 6 位小数，所以存储类型为：

decimal(10,6)

decimal 的第二个参数 6 代表，最多 6 位小数； 第一个参数 10 - 6 = 4，代表小数点前最多 4 位数，即 -9999 ~ 9999.

alter table sql

ALTER TABLE `oxygen_backend`.`device` 
CHANGE COLUMN `lat` `lat` DECIMAL(10,6) NULL DEFAULT NULL ,
CHANGE COLUMN `lng` `lng` DECIMAL(10,6) NULL DEFAULT NULL ;

TODO

• done. antd pro 编辑字段应为 float，但是被转换成了 int 类型
• done. 线上改表
• done. 线上录入测试数据点
• done. 小程序端获取经纬度
• done. 调用后台接口拉取附近的设备列表
• done. 如果返回的列表为空，提示，附近未发现设备
• 线上经纬度搞反了，数据修正

markers 报错

[渲染层错误] updateMultiMarker faild Error: 参数错误：LatLng 传入参数 (NaN, NaN) 非合法数字

markers: [{}],    // 错误的默认值
markers: [],      // 这样写才正确

MySQL

SELECT name, latitude, longitude, SQRT(
    POW(69.1 * (latitude - [target_lat]), 2) +
    POW(69.1 * ([target_lng] - longitude) * COS(latitude / 57.3), 2)) AS distance
FROM TableName 
HAVING distance < [distance]
ORDER BY distance;

单位为 miles, 英里。

1 英里＝1.6093 千米

测试数据

      {
        iconPath: "/images/target.png",
        id: 0,
        latitude: 37.53627,    // 37.415063,121.19606
        longitude: 121.38954,
        width: 40,
        height: 47.7,
        title: "高达一号",
      },
      {
        iconPath: "/images/target.png",
        id: 1,
        latitude: 37.538155,    // 37.428374,121.185761
        longitude: 121.390169,
        width: 40,
        height: 47.7,
        title: "高达二号",
      },
      {
        iconPath: "/images/target.png",
        id: 2,
        latitude: 37.539417,    // 37.410572,121.213023
        longitude: 121.388578,
        width: 40,
        height: 47.7,
        title: "高达三号",
      },

关于作者 🌱

我是来自山东烟台的一名开发者，有敢兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式