微信小程序 | 基于高德地图+ChatGPT实现旅游规划小程序

---

🎈🎈效果预览🎈🎈

❤ 路劲规划

❤ 功能总览

❤ ChatGPT交互

---

一、需求背景

五一假期即即将到来，在大家都阳过之后，截止到目前这应该是最安全的一个假期。所以出去旅游想必是大多数人的选择。

然后，就在我们做出外出游玩的决定后，制作旅游攻略就成了我们的心头大事！我是谁？我要去哪里？我要怎么去？

体验过ChatGPT的小伙伴都知道，他有一个旅游攻略规划的能力还是很给力的！基于此，我们这次动手做一个结合高德地图+ChatGPT``旅游攻略规划小程序

---

二、项目原理及架构

2.1 实现原理

（1）通过咨询ChatGPT生成包含具体地址的旅游攻略

（2）咨询ChatGPT生成相应地方的经纬度信息

（3）指定ChatGPT生成特定类型的攻略

---

2.2 技术架构

---

2.3 技术栈

模块	语言及框架	涉及的技术要点
小程序前端	基于VUE 2.0语法+Uni-app跨平台开发框架	Http接口通信、Flex布局方式、uView样式库的使用、JSON数据解析、定时器的使用
小程序接口服务端	Python + Flask WEB框架	rest接口的开发、 ChatGPT API接口的数据对接 、 前后端websocket实时通信

---

2.4 数据交互原理

---

三、项目功能的实现

3.1 ChatGPT API的接入

要接入ChatGPT API，需要按照以下步骤进行操作：

1. 注册一个账号并登录到OpenAI的官网：https://openai.com/
2. 在Dashboard页面上，创建一个API密钥。在“API Keys”选项卡下，点击“Generate New Key”按钮。将生成的密钥保存好，以备后续使用。
3. 选择所需的API服务，例如“Completion” API，以使用OpenAI的文本生成功能。

使用Python调用ChatGPT API实现代码如下：

• 方法一：使用request库

import requests
import json# 构建API请求
url = "https://api.openai.com/v1/engines/davinci-codex/completions"
headers = {"Content-Type": "application/json","Authorization": "Bearer YOUR_API_KEY"}
data = {"prompt": "Hello, my name is","max_tokens": 5
}# 发送API请求
response = requests.post(url, headers=headers, data=json.dumps(data))# 解析API响应
response_data = json.loads(response.text)
generated_text = response_data["choices"][0]["text"]print(generated_text)

• 方式二：使用openAI库

from flask import Flask, request
import openaiapp = Flask(__name__)openai.api_key = "YOUR_API_KEY_HERE"@app.route("/")
def home():return "Hello, World!"@app.route("/chat", methods=["POST"])
def chat():data = request.jsonresponse = openai.Completion.create(engine="davinci",prompt=data["message"],max_tokens=60)return response.choices[0].textif __name__ == "__main__":app.run()

3.2 小程序端设计与实现

首页地图	菜单栏
ChatGPT景点搜索	ChatGPT景点推荐
–	–

路线标记

---

3.3 高德地图服务接入

高德地图开放平台

开通WEB rest 接口服务

在开通了高德地图的API权限之后，即可获取到相应的AppID。只需要将APPID填入到项目中的manifest.json文件中，即可开启高德地图的路径导航功能的使用！

• 具体步骤如下：

• 具体代码：

 "h5" : {"sdkConfigs" : {// 使用地图或位置相关功能必须填写其一"maps" : {"qqmap" : {// 腾讯地图秘钥 https://lbs.qq.com/dev/console/key/manage"key" : ""},"google" : {// 谷歌地图秘钥（HBuilderX 3.2.10+）https://developers.google.com/maps/documentation/javascript/get-api-key"key" : ""},"amap" : {// 高德地图秘钥（HBuilderX 3.6.0+）https://console.amap.com/dev/key/app"key" : "",// 高德地图安全密钥（HBuilderX 3.6.0+）https://console.amap.com/dev/key/app"securityJsCode" : "",// 高德地图安全密钥代理服务器地址（HBuilderX 3.6.0+）https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare"serviceHost" : ""}}}}
}

---

3.4 地图与ChatGPT数据联动功能实现

核心原理：

• 先通过ChatGPT生成经纬度信息以及每一天的游玩地址
• 注册获取高德API调用权限
• 调用高德API中路径规划导航的接口
• 通过接口返回路径数组
• 将路径数据传递给前端地图组件进行渲染

function Route(){this.key = "放置你的高德地图API key";this.url = 'https://restapi.amap.com/v3/direction/driving';this.type = "driving";
}Route.prototype.setKey= function(key){this.key=key;
}
Route.prototype.setUrl = function(url){this.url=url;
}
Route.prototype.setType = function(type){this.type = type;
}Route.prototype.initParam = function(param){Object.assign(this,{...param});
}Route.prototype.drawRoute = function(map,origin,destination,line={arrowLine: true,'points':[],color:'#f00',width:10}){const {url,key,type="driving"} = this;const {markers=[],polyline=[]} = map;markers.push(origin);markers.push(destination);this.requestRoute(origin,destination).then(res=>{console.log('===res---',res)line.points || (line.points= []);res.data.route.paths.map(item=>{item.steps.map(path=>{path.tmcs.map(tmcs=>{tmcs.polyline.split(";").map(loacl=>{const longitude = loacl.split(",")[0];const latitude = loacl.split(",")[1];line.points.push({latitude: latitude, longitude: longitude});})});})});polyline.push(line);Object.assign(map,{latitude: origin.latitude,longitude: origin.longitude,// todo 通过距离 计算 scale 的值//scale: 15markers,polyline});});
}Route.prototype.initMap = function(object){console.log(object);Object.assign(object,{latitude: 39.90909,longitude: 116.434307,markers: [],polyline: [],scale: 8});
}Route.prototype.requestRoute = function(origin,destination){const {url,key} = this;return new Promise((resolve,reject)=>{uni.request({url: url,method: 'GET',data: {"origin": origin.longitude+","+origin.latitude,"destination": destination.longitude+","+destination.latitude,"key":key},success: res => {resolve(res);},fail: (err) => {reject(err);}});})
}export default new Route();

---

四、推荐阅读

🥇入门和进阶小程序开发，不可错误的精彩内容🥇 ：

• 《小程序开发必备功能的吐血整理【个人中心界面样式大全】》

• 《微信小程序 | 借ChatGPT之手重构社交聊天小程序》

• 《微信小程序 | 人脸识别的最终解决方案》

• 《微信小程序 ｜基于百度AI从零实现人脸识别小程序》

• 《吐血整理的几十款小程序登陆界面【附完整代码】》