1、效果图

2、带地址搜索框，在微信小程序线上需要开启地图定位接口，若没有权限则显示不了城市名，注意事项参考uniapp相关地图 API调用-CSDN博客

<template><view><u-sticky offset-top="-1"><u-search v-model="queryParams.spotTitle" :clearabled="true" :showAction="false" margin="10px 10px 0px 10px"bgColor="#e7e6e4" searchIconColor="black" searchIconSize="14px" :label="location.address" :placeholder="'\ue614 请输入关键词'"   searchIcon="arrow-down" inputAlign="center" @search="onSearch" @clear="getList"></u-search></u-sticky></view>
</template><script>import SpotCard from "@/pages/assembly/SpotCard.vue";import GridData from "@/pages/tourism-tabbar/home/GridData.vue";import {listSpot} from "@/api/tourism/spot.js";import QQMapWX from "qqmap-wx-jssdk";let qqmapsdk;export default {data() {return {location: {address: "城市"}}},onLoad() {qqmapsdk = new QQMapWX({key: this.QQ_MAP_KEY});this.getLocation();},methods: {getLocation() {uni.getLocation({type: 'wgs84', // 返回可以用于uni.openLocation的经纬度，默认为wgs84的gps坐标success: (res) => {this.location.latitude = res.latitude;this.location.longitude = res.longitude;this.reverseGeocoder();},fail: (err) => {console.error('获取位置失败：', err);},complete:()=>{//第一次等定位了再加载数据this.getList(true);}});},reverseGeocoder() {qqmapsdk.reverseGeocoder({coord_type: 5, //[默认]腾讯、google、高德坐标location: this.location,success: (res) => {let addr = res.result.address;this.location.address = addr.substring(0, 3);console.log(this.location.address);},fail: (err) => {console.error('reverseGeocoder失败：', err);}});}}};
</script><style>.u-search__content__input--placeholder {font-family: iconfont;}
</style>