怎么建个免费英文网站,怎么制作网站应用,哪家公司搭建网站,上海福步外贸论坛这个组件的功能#xff1a;可以重新定位获取到用户的具体位置#xff0c;这个是通过getLocation这个api和高德地图的api获取到的#xff0c;getLocation这个api需要在微信公众平台后台开发管理 接口管理里面申请才能使用的#xff0c;不然无法使用哦#xff0c;这…这个组件的功能可以重新定位获取到用户的具体位置这个是通过getLocation这个api和高德地图的api获取到的getLocation这个api需要在微信公众平台后台开发管理 接口管理里面申请才能使用的不然无法使用哦这个接口申请好像特别难需要技巧希望大家都能申请到吧。高德的api需要到高德的后台获取个人开发者每天有5000限额可以使用。 也可以通过点击右边的字母快速跳转到对应的城市可以点击热门城市或者城市列表快速定位城市。
选择城市页面展示 具体代码
templateview classmain-Location!-- 字母区域 --view classLocation-Letterview hover-classClick-Latter tapgetLetter(ScrollTop)*/viewview v-for(l, i) in LatterName :keyi hover-classClick-Latter tapgetLetter(l):style{ color: LetterId l ? #4662D9 : #000 }{{ l }}/view/viewview classynq-AutoLocation u_flex jcsbview classynq-AutoAddresstext classynq ynq-dizhi/texttext当前定位/texttext{{ userStore.province }}/text/viewview classynq-ReLocation u_flex clickgetLocationAuthu-icon namereload color#000/u-icontext classml5重新定位/text/view/viewscroll-view scroll-ytrue classynq-ScrollView :scroll-into-viewLetterId!-- 热门城市 --view classynq-HotCity idScrollTopview classynq-HotCityTitletext classynq ynq-fire/texttext热门城市/text/viewview classynq-HotCityList flextext classradius-3 tapsetProvince(item) v-for(item, index) in HotCity :keyindex{{ item }}/text/view/view!-- 城市列表 --view classynq-CityListblock v-for(item, index) in cityList :keyindexview classynq-CityLetter :iditem.initial{{ item.initial }}/viewview classynq-CityLinetext tapsetProvince(item_city.name) v-for(item_city, name_index) in item.list :keyname_index{{item_city.name }}/text/view/block/view/scroll-view/view
/templatescript setup langts
import { ref } from vue
import cityList from ./city
import useUserStore from /store/user;// 这里我使用了pinia来进行状态管理
const userStore useUserStore();let CityName ref(北京)
const HotCity [北京, 深圳, 上海, 成都, 广州, 广东]
const LatterName [A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S,T, U, V, W, X, Y, Z
]
let LetterId ref()// 右侧字母跳转到对应的城市
const getLetter (name) {LetterId.value nameconsole.log(点击名字, name);uni.pageScrollTo({selector: # name,duration: 300})
}// 点击城市名字存储
const setProvince (Name) {userStore.setUser(province, Name)CityName.value Name//跳转返回uni.navigateBack()
}// 根据API获取用户位置
const getLocationAuth () {// uni.chooseuni.getSystemInfo({success(res) {console.log(getSystemInfo, res);let locationEnabled res.locationEnabled; //判断手机定位服务是否开启let locationAuthorized res.locationAuthorized; //判断定位服务是否允许微信授权if (locationEnabled false || locationAuthorized false) {//手机定位服务GPS未授权console.log(手机定位服务);uni.showModal({title: 提示,content: 请打开定位服务功能,showCancel: false, // 不显示取消按钮success: (res) {console.log(showModalres, res);}})} else {console.log(uni.authorize);uni.getLocation({geocode: true, // 返回城市信息success: function (loction) {console.log(getLocation, loction);uni.request({url: https://restapi.amap.com/v3/geocode/regeo,method: GET,data: {key: 高德地图的key,location: loction.longitude , loction.latitude},success: (resda: any) {console.log(resda, resda)const { province, district } resda.data.regeocode.addressComponentCityName.value provinceuserStore.setUser(province, province)uni.navigateBack()}})}})}}})
}/scriptstyle langscss scoped
.main-Location {height: 100vh;
}.ynq-AutoLocation {width: calc(100% - 40rpx);background: rgba(250, 250, 250, .5);padding: 20rpx 20rpx;text.ynq {font-size: 32rpx;margin-right: 10rpx;}text {font-size: 30rpx;}
}.ynq-HotCity {padding: 20rpx;
}.ynq-HotCityTitle {padding: 0rpx 0rpx;text.ynq {margin-right: 10rpx;color: #ff0000;font-size: 32rpx;}text {font-size: 30rpx;}
}.ynq-HotCityList {padding: 20rpx 0 0 0;flex-wrap: wrap !important;text {width: 190rpx;display: inline-block;text-align: center;background: rgba(200, 200, 200, .2);font-size: 26rpx;margin: 10rpx;padding: 20rpx 10rpx;}
}.Location-Letter {position: fixed;right: 5rpx;top: 180rpx;width: 30rpx;z-index: 100;view {display: block;width: 30rpx;text-align: center;height: 35rpx;line-height: 35rpx;font-size: 22rpx;transition: ease .3s;-webkit-transition: ease .3s;}
}.ynq-CityList {padding: 0px 40rpx 0 20rpx;.ynq-CityLetter {line-height: 30rpx;height: 40rpx;font-size: 24rpx;border-bottom: 1px solid #f7f7f7;padding-left: 10rpx;color: #909090;}.ynq-CityLine {margin: 20rpx 0px;text {display: block;line-height: 60rpx;padding: 0px 10rpx;font-size: 30rpx;color: #767676;:nth-child(even) {background-color: rgba(200, 200, 200, .12);}}}
}.ynq-ScrollView {height: calc(100vh - 160rpx);
}.Click-Latter {font-size: 30rpx !important;
}.jcsb {justify-content: space-between;
}.u_flex {display: flex;align-items: center;
}
/style
