前言
前面已经分开分析过,把经纬度转为地址，也分析过用户位置授权弹窗，那现在说的是，当这两在同一个文件中，该怎么使用，至于下面的 amap-wx.130.js 这个怎么获取的，上面的经纬度转为地址里面有提到它的来源
总代码
<template>
<view class="bgc">
<!-- 头部结构以及功能 -->
<view class="page-body">
<view class="page-section page-section-gap">
<map style="width: 100%; height: 400px;" :latitude="latitude" :longitude="longitude" scale="18"
show-location="true">
</map>
</view>
</view>
<view class="search-bar">
<view class="city">
<view style="font-size: 12px;">{
{city}}</view>
</view>
<!-- 使用view组件模拟 input输入框的样式 -->
<view class="search-top">
<uni-search-bar placeholder="请输入您熟悉的站点名称" @input="search" :radius="100" cancelButton="none"></uni-search-bar>
</view>
</view>
<!-- 充电状态 -->
<!-- 中间卡片部分 -->
<uni-card v-for="(item,index) in stationList" :key="index" style="background-color: #08110f;">
<view @click="GoService(item)">{
{item.stationName}}</view>
<view class="state" @click="GoService(item)" style="display: flex;">
<view class="">
<image src="/static/quick.png" class="img">
</image>
<text style="margin-right: 20rpx;">{
{item.fastFree}}空闲/{
{item.fastTotal}} </text>
</view>
<view class="">
<image src="/static/slow.png" class="img">
</image>
<text>{
{item.slowFree}}空闲/{
{item.slowTotal}}</text>
</view>
<view class="" style="padding-top: 20rpx;position: absolute;right: 0;margin-right: 40rpx;">
<text style="color: red;">{
{item.electricityPrice == null?0 :item.electricityPrice}}</text>
元/度
</view>
</view>
</uni-card>
</view>
</template>
<script>
import amap from '../../components/amap-wx.130.js'
export default {
components: {
tabbar
},
data() {
return {
latitude: '',
longitude: '',
// 定时器
timer: null,
// 搜索关键词
kw: '',
show: true,
showSync: true,
city: '',
current: 0, //默认下标
// 对象
stationList: [],
searchList: [],
pageSize: '5',
pageNum: "1",
total: 0, // 总数据量
isLoading: false,
key: 'd3c69b1f62ff......',
amapPlugin: null
}
},
onLoad() {
this.amapPlugin = new amap.AMapWX({
key: this.key
});
// this.chooseSpot()
this.isGetLocation()
},
// 上拉刷新
onPullDownRefresh() {
this.pageNum = 1
this.stationList = []
this.getStationList(uni.stopPullDownRefresh)
},
// 下拉到底
onReachBottom() {
//判断当前数据是否已经是全部数据
if (this.pageNum * this.pageSize >= this.total) return
if (this.isLoading) return
//如果实在请求过程中,就不允许翻页 - 节流
//让页数加1
this.pageNum++
this.getStationList()
},
methods: {
isGetLocation(a = "scope.userLocation") { //检查当前是否已经授权访问scope属性
var _this = this;
uni.getSetting({
success(res) {
console.log(res)
if (!res.authSetting[a]) { //每次进入程序判断当前是否获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置
_this.getAuthorizeInfo()
} else {
_this.chooseSpot();
}
},
fail() {
console.log('用户拒绝授权');
}
});
},
getAuthorizeInfo(a = "scope.userLocation") { // uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗
var _this = this;
uni.authorize({
scope: a,
success() { //允许授权
console.log('已授权');
_this.getStationList()
},
fail() {
console.log('用户拒绝');
_this.getStationList()
}
})
},
// 高德地图的方法，获取地址
chooseSpot() {
this.amapPlugin.getRegeo({
success: (data) => {
// console.log(data, '高德地图');
this.latitude = data[0].latitude
// console.log(this.latitude);
this.longitude = data[0].longitude
// console.log(this.longitude);
this.city = data[0].regeocodeData.addressComponent.district
console.log(this.city, 'this。city');
this.getStationList()
}
});
},
// 输入框 inp 属性
search(val) {
this.kw = val
clearTimeout(this.timer)
if (val.trim() === '') {
//清空data中保存的搜索历史
this.searchList = []
return
}
this.timer = setTimeout(async () => {
const {
data: {
obj,
resCode
}
} = await uni.$http.post('/uniapp/pile/querySInfos', {
stationName: this.kw,
pageNum: this.pageNum,
pageSize: this.pageSize,
stationLng: this.longitude,
stationLat: this.latitude
})
if (resCode !== '00100000') return uni.$showMsg()
this.stationList = obj.list
console.log('搜索列表数据', this.stationList)
// this.saveHistory()
}, 3000)
},
// 跳转到分包中的搜索页面
goServiceHistory() {
uni.navigateTo({
url: '/subpkg/service/serviceHistory'
})
},
GoService(item) {
uni.navigateTo({
url: `/subpkg/service/service?item=${encodeURIComponent(JSON.stringify(item))}`
})
},
clickHandler() {
console.log('111');
},
//选择器对应的功能实现
onchange(e) {
const value = e.detail.value
console.log(value)
},
onnodeclick(node) {
console.log(node);
},
// 跳转至地图ye
mapClick(item) {
uni.navigateTo({
// url: '/subpkg/map/map'
url: `/subpkg/map/map?item=${encodeURIComponent(JSON.stringify(item))}`
})
},
// 发送请求
async getStationList(fn) {
this.isLoading = true
console.log(this.longitude);
console.log(this.latitude, this.longitude, '参数');
console.log(this.stationLat, 'stationLat', 'home信息的经纬度111'); //
const {
data: {
obj,
msg,
resCode
}
} = await uni.$http.post('/uniapp/pile/queryInfos', {
pageSize: this.pageSize,
pageNum: this.pageNum,
stationLng: this.longitude,
stationLat: this.latitude
})
this.isLoading = false
//判断是不是在下拉刷新中调用,如果是,关闭
fn && fn()
console.log(obj, msg, resCode, '信息列表查询');
if (resCode !== "00100000") return uni.$showMsg()
this.stationList = [...this.stationList, ...obj.list]
this.total = obj.total
console.log(this.stationList);
}
},
}
</script>
<style lang="scss" scoped>
.search-bar {
display: flex;
justify-content: center;
align-items: center;
height: 100rpx;
width: 100%;
padding: 20rpx;
background-color: #F5F5F7;
// 设置定位效果为“吸顶”
position: sticky;
// 吸顶的“位置”
top: 0;
// 提高层级，防止被轮播图覆盖
z-index: 999;
}
.city {
width: 15%;
}
.search-top {
flex: 1;
}
//快慢图标样式
.state {
.img {
height: 30rpx;
width: 40rpx;
margin-right: 20rpx;
margin-top: 20rpx;
}
}
.sugg-list {
padding: 10rpx;
.sugg-item {
font-size: 12px;
padding: 13px 0;
color: #000000;
border-bottom: 1px solid #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
.stationName {
// 文字不允许换行（单行文本）
white-space: nowrap;
// 溢出部分隐藏
overflow: hidden;
// 文本溢出后，使用 ... 代替
text-overflow: ellipsis;
margin-right: 3px;
}
}
}
</style>
在位置授权 的那篇文章中提到小程序会让审核uni.getLocation这个接口，所以 uni.getLocation这个api已经被chooseSpot这个方法替代了，这里面有写到上拉刷新，下拉加载，你们自己看看，