vant组件 AddressList van-address-edit实现输入地址出现详细地址功能实现

第一步: 根据提示获取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}&region=${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}&region=${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[])
};

页面使用效果:

使用问题: 因为请求地址需要填入region 也就是省 但是不能输入后直接获取到省 必须得用户先选好地区 再获取选好的地区的省 再发送请求才能实现 也就是用户得先选好地区 这个功能才能实现