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>