夜猫子的知识栈
神说要有光
2025-03-10
目录

Redis + 高德地图，实现附近的充电宝

# 前言

想必大家都打过车，打车软件可以根据你的当前位置搜索附近的车辆：

这两天国庆节，大家出去玩可能会借用共享充电宝。它也是基于你的位置来搜索附近充电宝：

再就是大家搜索附近的酒店、餐厅等，也是基于位置的搜索。

那么问题来了：这种附近的人、附近的酒店、附近的充电宝的功能是怎么实现的呢？

答案是用 Redis 实现的。

很多人对 Redis 的认识停留在它能做缓存，也就是从数据库中查询出来的数据，放到 redis 里，下次直接拿 redis 的数据返回：

确实，缓存是 redis 的常见应用。

# 但 redis 并不只是可以做缓存，很多临时的数据，比如验证码、token 等，都可以放到 redis 里。

redis 是 key-value 的数据库，value 有很多种类型：

  • string： 可以存数字、字符串，比如存验证码就是这种类型
  • hash：存一个 map 的结构，比如文章的点赞数、收藏数、阅读量，就可以用 hash 存
  • set：存去重后的集合数据，支持交集、并集等计算，常用来实现关注关系，比如可以用交集取出互相关注的用户
  • zset：排序的集合，可以指定一个分数，按照分数排序。我们每天看的文章热榜、微博热榜等各种排行榜，都是 zset 做的
  • list：存列表数据
  • geo：存地理位置，支持地理位置之间的距离计算、按照半径搜索附近的位置

其中，geo 的数据结构，就可以用来实现附近的人等功能。

比如大众点评、美团外卖这种，就是用 redis 实现的基于地理位置的功能。

今天我们就来实现一下：

在 RedisInsight 里输入命令，点击执行：

geoadd loc 13.361389 38.115556 "guangguang" 15.087269 37.502669 "dongdong"
1

# 我们用 geoadd 命令添加了两个位置。

guangguang 的位置是经度 13.361389，纬度 38.11556

dongdong 的位置是经度 15.08729 ，纬度 37.502669

点击刷新，就可以看到 loc 的 key：

# 然后可以用 geodist 计算两个位置之间的距离：

geodist loc guangguang dongdong
1

可以看到相距差不多 166 km

# 然后用 georadius 分别查找经度 15、纬度 37 位置的附近 100km 半径和 200km 半径的点：

georadius loc 15 37 100 km
georadius loc 15 37 200 km
1
2

结果如下：

因为两个点相距 166km，所以搜索 100km 以内的点，只能搜到一个。而 200km 的内的点，能搜到两个。

这样，我们就可以实现搜索附近 1km 的充电宝的功能。

服务端提供一个接口，让充电宝机器上传位置信息，然后把它存到 redis 里。

再提供个搜索的接口，基于传入的位置用 georadius 来搜索附近的充电宝机器，返回客户端。

客户端可以在地图上把这些点画出来。

这里用高德地图或者百度地图都行，他们都支持在地图上绘制 marker 标记的功能：

比如上面我们分别在地图上绘制了 marker 和 circle：

这是添加 Marker 的代码：

指定 marker 的经纬度和图片就行。

这是添加 Circle 的代码：

指定圆心经纬度和半径就行。

都挺简单的。

这样，后端和前端分别怎么实现，我们就都理清了。

# 接下来用代码实现下。

创建个 nest 项目：

npm install g @nestjs/cli

nest new nearby-search
1
2
3

进入项目目录，把它跑起来：

npm run start:dev
1

浏览器访问 http://localhost:3000 可以看到 hello world，就代表 nest 服务跑起来了：

# 然后我们安装连接 redis 的包：

npm install --save redis
1

创建个 redis 模块和 service：

nest g module redis
nest g service redis
1
2

在 RedisModule 创建连接 redis 的 provider，导出 RedisService：

import { Module } from '@nestjs/common';
import { createClient } from 'redis';
import { RedisService } from './redis.service';

@Module({
  providers: [
    RedisService,
    {
      provide: 'REDIS_CLIENT',
      async useFactory() {
        const client = createClient({
            socket: {
                host: 'localhost',
                port: 6379
            }
        });
        await client.connect();
        return client;
      }
    }
  ],
  exports: [RedisService]
})
export class RedisModule {}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 然后在 RedisService 里注入 REDIS_CLIENT，并封装一些操作 redis 的方法：

import { Inject, Injectable } from '@nestjs/common';
import { RedisClientType } from 'redis';

@Injectable()
export class RedisService {

    @Inject('REDIS_CLIENT') 
    private redisClient: RedisClientType;

    async geoAdd(key: string, posName: string, posLoc: [number, number]) {
        return await this.redisClient.geoAdd(key, {
            longitude: posLoc[0],
            latitude: posLoc[1],
            member: posName
        })
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

我们先添加了一个 geoAdd 的方法，传入 key 和位置信息，底层调用 redis 的 geoadd 来添加数据。

在 AppController 里注入 RedisService，然后添加一个路由：

# 添加 addPos 的 get 请求的路由，传入 name、longitude、latitude，调用 redisService添加位置信息。

import { BadRequestException, Controller, Get, Inject, Query } from '@nestjs/common';
import { AppService } from './app.service';
import { RedisService } from './redis/redis.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Inject(RedisService)
  private redisService: RedisService;

  @Get('addPos')
  async addPos(
    @Query('name') posName: string,
    @Query('longitude') longitude: number,
    @Query('latitude') latitude: number
  ) {
    if(!posName || !longitude || !latitude) {
      throw new BadRequestException('位置信息不全');
    }
    try {
      await this.redisService.geoAdd('positions', posName, [longitude, latitude]);
    } catch(e) {
      throw new BadRequestException(e.message);
    }
    return {
      message: '添加成功',
      statusCode: 200
    }
  }

  @Get()
  getHello(): string {
    return this.appService.getHello();
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

测试下：

/addPos?name=guang

/addPos?name=guang&longitude=15&latitude=35

/addPos?name=dong&longitude=15&latitude=85

然后去 RedisInsight 里看下：

点击刷新，可以看到确实有了 positions 的数据。

然后我们再添加个查询位置列表的接口：

async geoPos(key: string, posName: string) {
    const res = await this.redisClient.geoPos(key, posName);

    return {
        name: posName,
        longitude: res[0].longitude,
        latitude: res[0].latitude
    }
}

async geoList(key: string) {
    const positions = await this.redisClient.zRange(key, 0, -1);

    const list = [];
    for(let i = 0; i < positions.length; i++) {
        const pos = positions[i];
        const res = await this.geoPos(key, pos);
        list.push(res);
    }
    return list;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

因为 geo 信息底层使用 zset 存储的，所以查询所有的 key 使用 zrange。

zset 是有序列表，列表项会有一个分数，zrange 是返回某个分数段的 key，传入 0、-1 就是返回所有的。

然后再用 geoPos 拿到它对应的位置信息。

我们先在 RedisInsight 测试下这两个命令：

没啥问题。

在 AppController 添加两个路由：

@Get('allPos')
async allPos() {
    return this.redisService.geoList('positions');
}

@Get('pos')
async pos(@Query('name') name: string) {
    return this.redisService.geoPos('positions', name);
}
1
2
3
4
5
6
7
8
9

访问下试试：

最后，还要提供一个搜索附近的点的接口：

在 RedisService 添加 geoSearch 方法，传入 key，经纬度、搜索半径，返回附近的点：

这里单位用的 km。

async geoSearch(key: string, pos: [number, number], radius: number) {
    const positions = await this.redisClient.geoRadius(key, {
        longitude: pos[0],
        latitude: pos[1]
    }, radius, 'km');

    const list = [];
    for(let i = 0; i < positions.length; i++) {
        const pos = positions[i];
        const res = await this.geoPos(key, pos);
        list.push(res);
    }
    return list;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

先用 geoRadius 搜索半径内的点，然后再用 geoPos 拿到点的经纬度返回。

在 AppController 添加 nearbySearch 接口：

@Get('nearbySearch')
async nearbySearch(
    @Query('longitude') longitude: number,
    @Query('latitude') latitude: number,
    @Query('radius') radius: number
) {
    if(!longitude || !latitude) {
      throw new BadRequestException('缺少位置信息');
    }
    if(!radius) {
      throw new BadRequestException('缺少搜索半径');
    }

    return this.redisService.geoSearch('positions', [longitude, latitude], radius);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

首先我们在 RedisInsight 里算下两点的距离：

大概 5561 km

在 guang 附近搜索半径 5000km 内的位置：

/nearbySearch?longitude=15&latitude=35&radius=5000

找到了一个点。

然后搜索半径 6000km 内的位置：

/nearbySearch?longitude=15&latitude=35&radius=6000

不过现在的经纬度我们是随便给的。

可以用高德地图的坐标拾取工具来取几个位置：

天安门： 116.397444,39.909183

文化宫科技馆：116.3993,39.908578

售票处：116.397283,39.90943

故宫彩扩部：116.398002,39.909175

把这样 4 个位置添加到系统中：

/addPos?name=天安门&longitude=116.397444&latitude=39.909183

/addPos?name=文化宫科技馆&longitude=116.3993&latitude=39.908578

/addPos?name=售票处&longitude=116.397283&latitude=39.90943

/addPos?name=故宫彩扩部&longitude=116.398002&latitude=39.909175

先计算下天安门到故宫彩扩部的距离：

GEODIST positions 天安门 故宫彩扩部 km
1

是 0.0476km

那么我们在天安门的位置搜索 0.04km 内的点，应该搜不到它。

搜索 0.05 km 的点的时候，才能搜到。

试一下：

/nearbySearch?longitude=116.397444&latitude=39.909183&radius=0.04

/nearbySearch?longitude=116.397444&latitude=39.909183&radius=0.05

没啥问题，这样我们搜索附近的充电宝的后端功能就完成了。

# 然后写下前端页面。

# 在 main.ts 指定 public 目录为静态文件的目录：

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { NestExpressApplication } from '@nestjs/platform-express';

async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);

  app.useStaticAssets('public');

  await app.listen(3000);
}
bootstrap();
1
2
3
4
5
6
7
8
9
10
11
12

然后创建 public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    光光光
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11

访问下看看：

# 接下来要接入高德地图。

先按照文档 (opens new window)的步骤获取 key

这个很简单，填一下信息就好。

点击创建新应用 (opens new window)，选择 web 应用，就可以生成 key 了

然后把文档的 demo 代码 (opens new window)复制过来：

改成这样：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>附近的充电宝</title>
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <style>
        html,
        body,
        #container {
          width: 100%;
          height: 100%;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script src="https://webapi.amap.com/maps?v=2.0&key=f96fa52474cedb7477302d4163b3aa09"></script>
<script>
var map = new AMap.Map('container', {
    resizeEnable: true,
    zoom: 6,
    center: [116.397444, 39.909183]
});

var marker = new AMap.Marker({
    icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
    position: [116.399327,39.908562],
    anchor:'bottom-center'
});

var circle = new AMap.Circle({
    center: new AMap.LngLat(116.397444, 39.909183), // 圆心位置
    radius: 50,
    strokeColor: "#F33",  //线颜色
    strokeOpacity: 1,  //线透明度
    strokeWeight: 3,  //线粗细度
    fillColor: "#ee2200",  //填充颜色
    fillOpacity: 0.35 //填充透明度
});

map.add(marker);
map.add(circle);

map.setFitView();

</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

在天安门画了一个 circle，然后在文化宫科技馆画了一个 marker：

# 接下来引入 axios，来调用服务端接口：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>附近的充电宝</title>
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <style>
        html,
        body,
        #container {
          width: 100%;
          height: 100%;
        }
        
        label {
            width: 55px;
            height: 26px;
            line-height: 26px;
            margin-bottom: 0;
        }
        button.btn {
            width: 80px;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script src="https://webapi.amap.com/maps?v=2.0&key=f96fa52474cedb7477302d4163b3aa09"></script>
<script src="https://unpkg.com/axios@1.5.1/dist/axios.min.js"></script>
<script>

    const radius = 0.2;

    axios.get('/nearbySearch', {
        params: {
            longitude: 116.397444,
            latitude: 39.909183,
            radius
        }
    }).then(res => {
        const data = res.data;

        var map = new AMap.Map('container', {
            resizeEnable: true,
            zoom: 6,
            center: [116.397444, 39.909183]
        });

        data.forEach(item => {
            var marker = new AMap.Marker({
                icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                position: [item.longitude, item.latitude],
                anchor: 'bottom-center'
            });
            map.add(marker);
        });


        var circle = new AMap.Circle({
            center: new AMap.LngLat(116.397444, 39.909183), // 圆心位置
            radius: radius * 1000,
            strokeColor: "#F33",  //线颜色
            strokeOpacity: 1,  //线透明度
            strokeWeight: 3,  //线粗细度
            fillColor: "#ee2200",  //填充颜色
            fillOpacity: 0.35 //填充透明度
        });

        map.add(circle);
        map.setFitView();
    })
        
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

效果是这样的：

然后把 radius 改成 0.05，是这样的：

这样就实现了查找附近的充电宝的功能。

代码上传了小册仓库 (opens new window)

# 总结

我们经常会使用基于位置的功能，比如附近的充电宝、酒店，打车，附近的人等功能。

这些都是基于 redis 实现的，因为 redis 有 geo 的数据结构，可以方便的计算两点的距离，计算某个半径内的点。

前端部分使用地图的 sdk 分别在搜出的点处绘制 marker 就好了。

geo 的底层数据结构是 zset，所以可以使用 zset 的命令。

我们在 Nest 里封装了 geoadd、geopos、zrange、georadius 等 redis 命令。实现了添加点，搜索附近的点的功能。

以后再用这类附近的 xxx 功能，你是否会想起 redis 呢？

编辑 (opens new window)
上次更新: 2025/10/27 10:53:52
基于 Redis 实现分布式 session
用 Swagger 自动生成 api 文档

← 用 Swagger 自动生成 api 文档→

最近更新
01
H5调用微信jssdk
09-28
02
VueVirtualScroller
09-19
03
如何调试 Nest 项目
03-10
更多文章>
Copyright © 2019-2025 Study | MIT License