限 时 特 惠： 本站每日持续稳定更新内部创业教程，一年会员只需98元，全站资源免费下载 点击查看详情
站 长 微 信： muyang-0410
这两天国庆节，大家出去玩可能会借用共享充电宝。它也是基于你的位置来搜索附近充电宝：
再就是大家搜索附近的酒店、餐厅等，也是基于位置的搜索。
那么问题来了：这种附近的人、附近的酒店、附近的充电宝的功能是怎么实现的呢？
答案是用 Redis 实现的。
很多人对 Redis 的认识停留在它能做缓存，也就是从数据库中查询出来的数据，放到 redis 里，下次直接拿 redis 的数据返回：
确实，缓存是 redis 的常见应用。
但它并不只是可以做缓存，很多临时的数据坐标拾取工具，比如验证码、token 等，都可以放到 redis 里。
redis 是 key-value 的数据库，value 有很多种类型：
其中，geo 的数据结构，就可以用来实现附近的人等功能。
比如大众点评、美团外卖这种，就是用 redis 实现的基于地理位置的功能。
今天我们就来实现一下：
先在 官网下载个 ，然后用它来跑 redis：
在 搜索框搜索 redis，点击 run，把 redis 官方镜像下载并跑起来（这步需要科学上网）。
它会让你填一些容器的信息：
端口映射就是把主机的 6379 端口映射到容器内的 6379 端口，这样就能直接通过本机端口访问容器内的服务了。
指定数据卷，用本机的任意一个目录挂载到容器内的 /data 目录，这样数据就会保存在本机。
跑起来之后是这样的：
然后下载 ，它是 redis 官方出的 GUI 工具：
打开 ，连接本地的刚才用 跑的 redis ：
然后就可以看到 redis 里的所有的 key：
这些是我之前添加的。
然后打开执行命令的面板，输入命令，点击执行：
geoadd loc 13.361389 38.115556 "guangguang" 15.087269 37.502669 "dongdong"
我们用 命令添加了两个位置。
的位置是经度 13.，纬度 38.11556
的位置是经度 15.08729 ，纬度 37.
点击刷新，就可以看到 loc 的 key：
然后可以用 计算两个位置之间的距离：
geodist loc guangguang dogndong
可以看到相距差不多 166 km
然后用 分别查找经度 15、纬度 37 位置的附近 100km 半径和 200km 半径的点：
georadius loc 15 37 100 km
georadius loc 15 37 200 km
结果如下：
因为两个点相距 166km，所以搜索 100km 以内的点，只能搜到一个。而 200km 的内的点，能搜到两个。
这样，我们就可以实现搜索附近 1km 的充电宝的功能。
服务端提供一个接口，让充电宝机器上传位置信息，然后把它存到 redis 里。
再提供个搜索的接口，基于传入的位置用 来搜索附近的充电宝机器，返回客户端。
客户端可以在地图上把这些点画出来。
这里用高德地图或者百度地图都行，他们都支持在地图上绘制 标记的功能：
比如上面我们分别在地图上绘制了 和 ：
这是添加 的代码：
指定 的经纬度和图片就行。
这是添加 的代码：
指定圆心经纬度和半径就行。
都挺简单的。
这样，后端和前端分别怎么实现，我们就都理清了。
接下来用代码实现下。
创建个 nest 项目：
npm install g @nestjs/cli
nest new nearby-search
进入项目目录，把它跑起来：
npm run start:dev
浏览器访问 :3000 可以看到 hello world，就代表 nest 服务跑起来了：
然后我们安装连接 redis 的包：
npm install --save redis
创建个 redis 模块和 ：
nest g module redis
nest g service redis
在 创建连接 redis 的 ，导出 ：
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 {}
然后在 里注入 ，并封装一些操作 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
})
}
}
我们先添加了一个 的方法，传入 key 和位置信息，底层调用 redis 的 来添加数据。
在 里注入 ，然后添加一个路由：
添加 的 get 请求的路由，传入 name、、，调用 添加位置信息。
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();
}
}
测试下：
/?name=guang
/?name=guang&=15&=35
/?name=dong&=15&=85
然后去 里看下：
点击刷新，可以看到确实有了 的数据。
然后我们再添加个查询位置列表的接口：
因为 geo 信息底层使用 zset 存储的，所以查询所有的 key 使用 。
zset 是有序列表，列表项会有一个分数， 是返回某个分数段的 key，传入 0、-1 就是返回所有的。
然后再用 拿到它对应的位置信息。
我们先在 测试下这两个命令：
没啥问题。
在 添加两个路由：
@Get('allPos')
async allPos() {
return this.redisService.geoList('positions');
}
@Get('pos')
async pos(@Query('name') name: string) {
return this.redisService.geoPos('positions', name);
}
访问下试试：
最后，还要提供一个搜索附近的点的接口：
在 添加 方法，传入 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;
}
先用 搜索半径内的点坐标拾取工具，然后再用 拿到点的经纬度返回。
在 添加 接口：
@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);
}
首先我们在 里算下两点的距离：
大概 5561 km
在 guang 附近搜索半径 内的位置：
/?=15&=35&=5000
找到了一个点。
然后搜索半径 内的位置：
/?=15&=35&=6000
不过现在的经纬度我们是随便给的。
可以用高德地图的坐标拾取工具来取几个位置：
天安门： 116.,39.
文化宫科技馆：116.3993,39.
售票处：116.,39.90943
故宫彩扩部：116.,39.
把这样 4 个位置添加到系统中：
/?name=天安门&=116.&=39.
/?name=文化宫科技馆&=116.3993&=39.
/?name=售票处&=116.&=39.90943
/?name=故宫彩扩部&=116.&=39.
先计算下天安门到故宫彩扩部的距离：
GEODIST positions 天安门 故宫彩扩部 km
是 0.
那么我们在天安门的位置搜索 0.04km 内的点，应该搜不到它。
搜索 0.05 km 的点的时候，才能搜到。
试一下：
/?=116.&=39.&=0.04
/?=116.&=39.&=0.05
没啥问题，这样我们搜索附近的充电宝的后端功能就完成了。
然后写下前端页面。
在 main.ts 指定 目录为静态文件的目录：
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { NestExpressApplication } from '@nestjs/platform-express';
async function bootstrap() {
const app = await NestFactory.create(AppModule);
app.useStaticAssets('public');
await app.listen(3000);
}
bootstrap();
然后创建 /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>
访问下看看：
接下来要接入高德地图。
先按照文档的步骤获取 key
这个很简单，填一下信息就好。
点击创建新应用，选择 web 应用，就可以生成 key 了
然后把文档的 demo 代码复制过来：
改成这样：
<!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>
<div class="input-card" style="width:24rem;">
<h4>添加、删除覆盖物</h4>
<div class="input-item">
<label>Marker：</label>
<button class="btn" id="add-marker" style="margin-right:1rem;">添加Marker</button>
<button class="btn" id="remove-marker">删除Marker</button>
</div>
<div class="input-item">
<label>Circle：</label>
<button class="btn" id="add-circle" style="margin-right:1rem;">添加Circle</button>
<button class="btn" id="remove-circle">删除Circle</button>
</div>
</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>
在天安门画了一个 ，然后在文化宫科技馆画了一个 ：
接下来引入 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>
<div class="input-card" style="width:24rem;">
<h4>添加、删除覆盖物</h4>
<div class="input-item">
<label>Marker：</label>
<button class="btn" id="add-marker" style="margin-right:1rem;">添加Marker</button>
<button class="btn" id="remove-marker">删除Marker</button>
</div>
<div class="input-item">
<label>Circle：</label>
<button class="btn" id="add-circle" style="margin-right:1rem;">添加Circle</button>
<button class="btn" id="remove-circle">删除Circle</button>
</div>
</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>
效果是这样的：
然后把 改成 0.05，是这样的：
这样就实现了查找附近的充电宝的功能。
代码上传了 ：
总结
我们经常会使用基于位置的功能，比如附近的充电宝、酒店，打车，附近的人等功能。
这些都是基于 redis 实现的，因为 redis 有 geo 的数据结构，可以方便的计算两点的距离，计算某个半径内的点。
前端部分使用地图的 sdk 分别在搜出的点处绘制 就好了。
geo 的底层数据结构是 zset，所以可以使用 zset 的命令。
我们在 Nest 里封装了 、、、 等 redis 命令。实现了添加点，搜索附近的点的功能。
以后再用这类附近的 xxx 功能，你是否会想起 redis 呢？
限 时 特 惠： 本站每日持续稳定更新内部创业教程，一年会员只需98元，全站资源免费下载 点击查看详情
站 长 微 信： muyang-0410
