第一步: 根据提示获取ak(api) 和请求地址
Web服务API | 百度地图API SDK (baidu.com)
第二步: 用node写一个后端接口 发送请求(解决跨域) ,运行服务器
// 创建http 这个http是我们安装好node自带的 我们要通过这个创建服务器
let http = require('http');
// 我们要实现跨域要看别人的协议是什么 是http是就引入https
let https = require('https');
let moduleSetHtml = require("./module/setHtml");
let moduleSetStatus = require("./module/setStatus");
// 创建服务器 这里服务器里函数 有两个参数 第一个参数表示浏览器传给我们的数据信息 第二个参数是我们返回给浏览器的数据
http.createServer((req, res) => {
let address = new URL(req.url, "http://127.0.0.1");
let param = address.pathname;
if (address.pathname == '/favicon.ico') {
return;
}
const searchParams = address.searchParams
let query = searchParams.get('query')
let region = searchParams.get('region')
console.log(query, region);
//如果要解决前端向我们的跨域问题 要在请求头设置第二个参数设置 cors
res.writeHead(200, {
'Content-Type': "application/json;charset:utf-8",
'access-control-allow-origin': "*" //这里表示设置请求来源全部允许
});
/* 我们请求的顺序的 先是前端传给我们请求 然后我们去请求别人的数据 得到后返回给后端
因为前端直接去请求别人的数据会存在跨域问题 但是我们去就不存在这个问题 这样就解决了跨域问题
*/
switch (param) {
case '/name':
getHtml(query, region, (data) => {
res.end(data);
})
break;
default:
res.end("404")
break;
}
//每次写代码需要重新重启服务器才能生效 ctrl + c 退出
}).listen(3000, () => { //这里我们还可以设置一个监听 第一个参数为端口号 第二个参数可以设置一个函数 这个函数内容在浏览器启动后会自动触发
console.log("服务器已经启动");
})
function getHtml(query, region, callback) {
let data = "";
// get方法 获取到数据 第一个参数为地址 第二个参数为一个函数
https.get(`https://api.map.baidu.com/place/v2/suggestion?query=${query}®ion=${region}&city_limit=true&output=json&ak=7gQZIbRzFvUDKi2lTYubiNUjV4v6X61T`, res => {
// data 表示数据 在一点一点的传输回来 所以我们要定义一个变量 不停的接收他
res.on('data', chunk => { //这里才能接收数据 所以要设置一个参数
data += chunk;
console.log(chunk);
})
// end 表示数据已经完全发送完毕了 这时候我们就发送数据给前端了
res.on('end', () => {
console.log(data);
callback(data)
})
})
}
第三步: 前端页面发送请求 这里用的ts js直接无视后面的 : xxx 即可
import { reactive } from "vue";
import axios from "axios";
export default async function getDetailAddress(query: string, region: string) {
type Request<T> = {
data: {
result: [T]
}
}
type Result = {
name: string
address: string
}
const detail = reactive<Result[]>([])
const { data }: Request<Result> = await axios.get(`http://localhost:3000/name?query=${query}®ion=${region}`)
data.result.filter(item => detail.push({ name: item.name, address: item.address }))
// console.log(data);
// console.log(detail);
return detail
}
/* 引入获取列表函数 */
import getDetailAddress from '@/hooks/detailAddress.js';
const onChangeDetail = async (val: string) => {
const data = await getDetailAddress(val, province.value)
searchResult.value = (data as unknown as address[])
};
页面使用效果:
![](https://i-blog.csdnimg.cn/blog_migrate/d5a039266fe864317c9f0402ae4053cd.png)
使用问题: 因为请求地址需要填入region 也就是省 但是不能输入后直接获取到省 必须得用户先选好地区 再获取选好的地区的省 再发送请求才能实现 也就是用户得先选好地区 这个功能才能实现