初始化项目
This commit is contained in:
@@ -0,0 +1,383 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 地图显示 -->
|
||||
<map
|
||||
id="map"
|
||||
:latitude="userLocation.latitude"
|
||||
:longitude="userLocation.longitude"
|
||||
:markers="markers"
|
||||
show-location
|
||||
:scale="scale"
|
||||
style="width: 100%; height: 100vh;"
|
||||
@markertap="onMarkerTap">
|
||||
<cover-image class="img-map1" src="/static/center.png"></cover-image>
|
||||
<cover-image class="img-map2" src="/static/locate.png" @click="clickcontrol"></cover-image>
|
||||
</map>
|
||||
|
||||
<!-- 加油站列表 -->
|
||||
<view class="station-list">
|
||||
<view class="station-item" v-if="now.id != undefined">
|
||||
<view class="station-info">
|
||||
<text class="station-name">{{ now.name }}</text>
|
||||
<view>
|
||||
<text class="station-distance">距您 {{ now.distance }}km</text>
|
||||
<text class="station-addres">{{ now.address }}</text>
|
||||
</view>
|
||||
<view class="station-oil">
|
||||
<text>0#</text>
|
||||
<text>92#</text>
|
||||
<text>95#</text>
|
||||
</view>
|
||||
<view class="station-time-info">
|
||||
<view class="time-info-time">00:00-23:59 营业</view>
|
||||
<view class="time-info-plan">
|
||||
<text>便利点</text>
|
||||
<text>卫生间</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="station-action">
|
||||
<button class="navigate-button" @click="navigate()">导航加油站</button>
|
||||
<button class="navigate-button" @click="oil()">去购券</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="station-item" v-else>
|
||||
<view class="station-info">
|
||||
<text class="station-name">您所在的城市，暂无可用加油站</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import * as StationApi from '@/api/station'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userLocation: {
|
||||
latitude: 0,
|
||||
longitude: 0
|
||||
},
|
||||
markers: [
|
||||
],
|
||||
scale: 13,
|
||||
now: {}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getUserLocation();
|
||||
},
|
||||
methods: {
|
||||
// 获取用户当前的位置
|
||||
getUserLocation() {
|
||||
// let latitude = '25.068413'
|
||||
// let longitude = '118.522990'
|
||||
// this.userLocation.latitude = latitude;
|
||||
// this.userLocation.longitude = longitude;
|
||||
// // 存储经纬度到缓存中
|
||||
// uni.setStorageSync('latitude', latitude)
|
||||
// uni.setStorageSync('longitude', longitude)
|
||||
|
||||
// uni.setStorageSync('province', '福建省')
|
||||
// uni.setStorageSync('city', '泉州市')
|
||||
// uni.setStorageSync('district', '南安市')
|
||||
// this.mapapiStation()
|
||||
let app = this
|
||||
// 获取经纬度
|
||||
uni.authorize({
|
||||
scope: 'scope.userLocation',
|
||||
success() {
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
success: (res) => {
|
||||
app.userLocation.latitude = res.latitude;
|
||||
app.userLocation.longitude = res.longitude;
|
||||
// 存储经纬度到缓存中
|
||||
uni.setStorageSync('latitude', res.latitude)
|
||||
uni.setStorageSync('longitude', res.longitude)
|
||||
|
||||
app.getRegion(res.latitude, res.longitude).then(region => {
|
||||
uni.setStorageSync('province', region.province)
|
||||
uni.setStorageSync('city', region.city)
|
||||
uni.setStorageSync('district', region.district)
|
||||
app.mapapiStation(res.latitude, res.longitude)
|
||||
}).catch(err => {
|
||||
console.error('获取区域信息失败:', err);
|
||||
});
|
||||
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('获取位置失败', err);
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('授权失败', err);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 获取加油站点
|
||||
mapapiStation(latitude, longitude) {
|
||||
let app = this
|
||||
let key = '67NBZ-MHUH4-ODCU2-KNPZW-3OGJF-ARBRQ';
|
||||
let url = `https://apis.map.qq.com/ws/place/v1/search?key=${key}&keyword=中国石油&boundary=nearby(${latitude},${longitude},1000)&page_size=20`;
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.request({
|
||||
url: url,
|
||||
method: 'GET',
|
||||
success: (res) => {
|
||||
var markers = [] //地图markers标记点
|
||||
var arr = res.data.data
|
||||
for (var i = 0; i < arr.length; i++) {
|
||||
markers.push({
|
||||
iconPath: "/static/marker.png",
|
||||
id: i,
|
||||
name: arr[i].title,
|
||||
latitude: arr[i].location.lat,
|
||||
longitude: arr[i].location.lng,
|
||||
address: arr[i].address,
|
||||
distance: (arr[i]._distance/1000).toFixed(2),
|
||||
width: 32,
|
||||
height: 32
|
||||
})
|
||||
}
|
||||
app.markers = markers
|
||||
app.now = markers[0]
|
||||
resolve(markers)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('请求失败：', err);
|
||||
reject(err); // 请求失败处理
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
// 逆你解析地址
|
||||
getRegion(latitude, longitude) {
|
||||
let key = '67NBZ-MHUH4-ODCU2-KNPZW-3OGJF-ARBRQ'; // ETFBZ-F4XCW-YOQRI-RWBQM-BAZIQ-2VFS5
|
||||
let url = `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=${key}`;
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.request({
|
||||
url: url,
|
||||
method: 'GET',
|
||||
success: (res) => {
|
||||
let data = res.data;
|
||||
if (data.status === 0) { // 腾讯地图API通常使用0表示成功
|
||||
let address = data.result.address; // 完整地址
|
||||
let province = data.result.address_component.province; // 省
|
||||
let city = data.result.address_component.city; // 市
|
||||
let district = data.result.address_component.district; // 区/县
|
||||
|
||||
let region = {
|
||||
address: address,
|
||||
province: province,
|
||||
city: city,
|
||||
district: district,
|
||||
};
|
||||
resolve(region); // 成功时返回region对象
|
||||
} else {
|
||||
console.error('逆地理编码失败：', data.message);
|
||||
reject(data.message); // 处理失败情况
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('请求失败：', err);
|
||||
reject(err); // 请求失败处理
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
// 获取站点列表
|
||||
getStationList(pageNo = 1) {
|
||||
const app = this
|
||||
return new Promise((resolve, reject) => {
|
||||
StationApi.list({ page: pageNo })
|
||||
.then(result => {
|
||||
const newList = result.data.list
|
||||
app.markers = newList
|
||||
app.getRegion(newList[0].latitude, newList[0].longitude).then(region => {
|
||||
newList[0].address = region.address
|
||||
}).catch(err => {
|
||||
console.error('获取区域信息失败:', err);
|
||||
});
|
||||
app.now = newList[0]
|
||||
resolve(newList)
|
||||
})
|
||||
})
|
||||
},
|
||||
// 更新每个标记点与用户位置之间的距离
|
||||
updateDistances() {
|
||||
this.markers = this.markers.map(marker => {
|
||||
marker.distance = this.calculateDistance(
|
||||
this.userLocation.latitude,
|
||||
this.userLocation.longitude,
|
||||
marker.latitude,
|
||||
marker.longitude
|
||||
);
|
||||
return marker;
|
||||
});
|
||||
},
|
||||
// 计算两点之间的距离
|
||||
calculateDistance(lat1, lon1, lat2, lon2) {
|
||||
const radLat1 = this.rad(lat1);
|
||||
const radLat2 = this.rad(lat2);
|
||||
const a = radLat1 - radLat2;
|
||||
const b = this.rad(lon1) - this.rad(lon2);
|
||||
let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
|
||||
Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
|
||||
s = s * 6378.137; // 地球半径（单位：公里）
|
||||
s = Math.round(s * 10000) / 10000;
|
||||
return s.toFixed(2);
|
||||
},
|
||||
rad(d) {
|
||||
return d * Math.PI / 180.0;
|
||||
},
|
||||
// 标记点点击事件处理
|
||||
onMarkerTap(event) {
|
||||
const markerId = event.detail.markerId;
|
||||
const marker = this.markers.find(m => m.id === markerId);
|
||||
if (marker) {
|
||||
// this.getRegion(marker.latitude, marker.longitude).then(region => {
|
||||
// marker.address = region.address
|
||||
// }).catch(err => {
|
||||
// console.error('获取区域信息失败:', err);
|
||||
// });
|
||||
this.now = marker;
|
||||
}
|
||||
},
|
||||
//右下角定位按钮的点击事件
|
||||
clickcontrol(){
|
||||
uni.createMapContext("map", this).moveToLocation({ //moveToLocation将地图中心移动到当前定位点，需要配合map组件的show-location使用
|
||||
latitude: this.userLocation.latitude,
|
||||
longitude: this.userLocation.longitude
|
||||
});
|
||||
},
|
||||
// 导航到标记点
|
||||
navigate() {
|
||||
uni.openLocation({
|
||||
latitude: Number(this.now.latitude),
|
||||
longitude: Number(this.now.longitude),
|
||||
name: this.now.name,
|
||||
address: this.now.address,
|
||||
scale: 18
|
||||
});
|
||||
},
|
||||
// 跳转商品详情页
|
||||
oil() {
|
||||
this.$navTo('pages/goods/list?location=1')
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.station-list {
|
||||
width: 100%;
|
||||
padding: 20rpx;
|
||||
position: fixed;
|
||||
bottom: 80rpx;
|
||||
height: 300rpx;
|
||||
}
|
||||
|
||||
.station-item {
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
margin-bottom: 10rpx;
|
||||
border-radius: 12rpx;
|
||||
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
|
||||
height: 350rpx;
|
||||
}
|
||||
|
||||
.station-info {
|
||||
height: 250rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.station-name {
|
||||
font-size: 35rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.station-distance {
|
||||
font-size: 26rpx;
|
||||
margin-top: 4rpx;
|
||||
margin-right: 25rpx;
|
||||
}
|
||||
|
||||
.station-oil {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
}
|
||||
.station-oil text{
|
||||
background-color: #5983b1;
|
||||
color: aliceblue;
|
||||
padding: 4rpx 8rpx;
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.station-time-info{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
}
|
||||
.station-time-info .time-info-time {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
.station-time-info .time-info-plan {
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
gap: 10rpx;
|
||||
}
|
||||
.station-time-info .time-info-plan text{
|
||||
padding: 4rpx;
|
||||
border: 1rpx solid #007aff;
|
||||
color: #007aff;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
.navigate-button {
|
||||
padding: 4rpx 14rpx;
|
||||
background-color: #007aff;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4rpx;
|
||||
font-size: 22rpx;
|
||||
width: 150rpx;
|
||||
}
|
||||
|
||||
.navigate-button:active {
|
||||
background-color: #005bb5;
|
||||
}
|
||||
.station-action{
|
||||
display: flex;
|
||||
}
|
||||
.img-map1{
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
position: fixed;
|
||||
bottom: 47%;
|
||||
left: 46%;
|
||||
}
|
||||
.img-map2{
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
position: fixed;
|
||||
bottom: 30vh;
|
||||
right: 2vh;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user