uniapp 利用高德进行关键字搜索

1、下载微信小程序插件
相关下载-微信小程序插件 | 高德地图API

2、直接使用

<template>
    <view>
        <view style="padding: 20rpx;">
            <view style="background-color: #f1f1f1;padding: 10rpx 20rpx;width: 90%;margin: auto;border-radius: 50px;display: flex;">
                <uni-icons type="search" size="22" style="margin-right: 15rpx;"></uni-icons>
                <input v-model="keyword" @input="searchTips" placeholder="请输入关键词" />
            </view>
        </view>
        <ul>
            <li @click="dizhi(item)" v-for="(item,index) in tips" :key="item.id" style="font-size: 28rpx;padding: 10rpx 0rpx;">{{ item.name }}</li>
        </ul>
    </view>
</template>

<script>
    import amapFile from '../../common/amap-wx.130/amap-wx.130.js';
    export default {
        data() {
            return {
                keyword: '', // 用户输入的关键词
                tips: [], // 搜索提示结果
            }
        },
        onLoad() {
        },
        watch: {
            keyword() {
                this.tips = []
            },
        },
        methods: {
            searchTips() {
                this.myAmapFun = new amapFile.AMapWX({
                    key: '您申请的key' //微信小程序的key
                });
                const _this = this;
                // 发起搜索提示请求
                this.myAmapFun.getInputtips({
                    keywords: this.keyword,
                    city: '石家庄', //必须填写搜索的城市
                    success(data) {
                        console.log(data);
                        if (data && data.tips) {
                            _this.tips = data.tips;
                            console.log(_this.tips);
                        }
                    },
                });
            },
        }
    }
</script>

<style>
    #container {
        width: 300px;
        height: 200px;
    }

    ul {
        list-style: none;
    }
</style>