Table of contents
① First send the getStationList request to obtain the array list information
② The paging logic is triggered when the regionChange field of view changes
Use style penetration to change the font color of the input box
renderings
This effect is to enter the current page to display your own latitude and longitude and display the current pageSize bar data according to pageSize and pageNum. When the map view changes, make this.pageNum * this.pageSize >= this.total judgment, let this.pageNum++, let all The data is displayed on the map
total code
<template>
<view>
<view class="map-container">
<map style="width: 100%; height: 100vh;" :show-location='true' ref="map" id="map" :latitude="latitude"
:longitude="longitude" :markers="marker" :scale="scale" @callouttap='callouttap' @regionchange="regionChange"
v-if="mapShow">
<view class="cover-view">
<view style="margin-top: 20rpx;" @click="onControltap">
<image class="cover-image" src="/static/images/location.png"></image>
<view>定位</view>
</view>
</view>
</map>
</view>
<view class="search" :style="{top:topHeight+'px'}">
<searchBar @click="search" :city="city"></searchBar>
</view>
<cardList :stationList="markerIdClick" v-if="tag" style="position: fixed;top: 70%;"></cardList>
<tabbar :current="current"></tabbar>
</view>
</template>
<script>
export default {
data() {
return {
mapShow: false,
topHeight: 20,
tag: false,
latitude: '', //纬度
longitude: '', //经度
scale: 12, //缩放级别
current: 1,
marker: [],
pageSize: 10,
pageNum: 1,
total: 0, // 总数据量
markerIdClick: [],
mapList: [],
}
},
async onLoad() {
let userLocation = uni.getStorage({
key: 'userLocation'
})
await userLocation.then(data => {
let arr = data[1].data.split(',')
this.longitude = arr[0]
this.latitude = arr[1]
console.log(arr);
})
this.getStationList()
const {
height,
top
} = uni.getMenuButtonBoundingClientRect();
this.topHeight = height + top + 13
},
methods: {
search(searchInp) {
console.log('search页面子向父传值', searchInp);
},
regionChange() {
this.tag = false
if (this.pageNum * this.pageSize >= this.total) return
this.pageNum++
this.getStationList()
},
//定位
onControltap() {
uni.createMapContext("map", this).moveToLocation({ //moveToLocation将地图中心移动到当前定位点，需要配合map组件的show-location使用
latitude: this.latitude,
longitude: this.longitude,
});
console.log('定位');
},
//气泡点击事件
callouttap(e) {
let id = String(e.detail.markerId)
let arr = this.mapList.find(item => {
return item.stationId === id
})
this.markerIdClick = [arr]
this.tag = true
},
async getStationList() {
console.log('发送请求前 打印用户经纬度', this.latitude, this.longitude);
const {
data: {
obj,
msg,
resCode
}
} = await uni.$http.post('/uniapp/pile/queryStationInfos', {
pageSize: this.pageSize,
pageNum: this.pageNum,
stationLng: this.longitude,
stationLat: this.latitude
})
console.log('queryStationInfos，信息列表显示总数据', obj, msg, resCode);
if (resCode !== "00100000") return uni.$showMsg()
this.total = obj.total
obj.list.forEach(item => {
this.marker.push({
id: Number(item.stationId),
iconPath: '/static/images/mapStation.png', //显示的图标
title: item.stationName,
latitude: Number(item.stationLat),
longitude: Number(item.stationLng),
width: 30,
height: 30,
callout: { //气泡窗口
content: '空闲' + item.totalFree, //文本
color: '#ffffff',
fontSize: 15,
borderRadius: 15,
padding: '10',
bgColor: '#406390',
display: 'ALWAYS', //常显
}
})
})
this.mapShow = true
this.mapList = this.mapList.concat(obj.list)
console.log(this.marker);
// for (let index in obj.list) {
// let stationMarker = {
// iconPath: '/static/images/mapStation.png', //显示的图标
// id: Number(index) || 0,
// title: this.mapList[index].stationName || '',
// latitude: Number(this.mapList[index].stationLat),
// longitude: Number(this.mapList[index].stationLng),
// width: 30,
// height: 30,
// callout: { //气泡窗口
// content: '空闲' + this.mapList[index].totalFree, //文本
// color: '#ffffff', //文字颜色
// fontSize: 15, //文本大小
// borderRadius: 15, //边框圆角
// padding: '10',
// bgColor: '#406390', //背景颜色
// display: 'ALWAYS', //常显
// }
// }
// // console.log(stationMarker, 'stationMarker');
// this.marker.push(stationMarker)
// }
}
}
}
</script>
<style scoped lang="scss">
/deep/ .uni-searchbar__box-search-input {
color: #fff !important;
}
.search {
position: fixed;
width: 80%;
}
.map-container {
margin-top: -40rpx;
position: relative;
overflow: hidden;
border-radius: 50rpx 50rpx 0 0;
.cover-view {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* width: 80rpx;
height: 160rpx; */
padding: 42rpx 22rpx;
color: #4F575F;
font-weight: 400;
background-color: #fff;
background-size: 120rpx 120rpx;
background-position: center center;
position: absolute;
top: 150rpx;
right: 32rpx;
border-radius: 15rpx;
}
.cover-image {
display: inline-block;
width: 50rpx;
height: 50rpx;
}
}
</style>analyze
1. template page
（1）
<tabbar :current="current"></tabbar> current: 1 This page is a custom tab bar
（2）
Supplementary dynamic style can also be changed to :style="{'margin-top':topHeight+'px'}"
<view class="search" :style="{top:topHeight+'px'}">
<searchBar @click="search" :city="city"></searchBar>
</view>
The dynamic style is to make the input box at the lower side of the capsule, and the searchBar is the component I encapsulated
renderings
（3）
<cardList :stationList="markerIdClick" v-if="tag" style="position: fixed;top: 70%;"></cardList>
It is the component I encapsulated, v-if="tag" is not displayed by default, the card information that appears when I click the bubble
（4）
map display code
<view class="map-container">
<map style="width: 100%; height: 100vh;" :show-location='true' ref="map" id="map" :latitude="latitude"
:longitude="longitude" :markers="marker" :scale="scale" @callouttap='callouttap' @regionchange="regionChange"
v-if="mapShow">
<view class="cover-view">
<view style="margin-top: 20rpx;" @click="onControltap">
<image class="cover-image" src="/static/images/location.png"></image>
<view>定位</view>
</view>
</view>
</map>
</view>In the map component , I only used the following two methods
①@regionchange
When the field of view changes, pagination is performed inside,
②@callouttap
Card content appears when a marker is clicked
2. onload
As soon as this page comes in
The first thing is to get the latitude and longitude. This method is used because we used Gaode amap-wx.130.js earlier . This file helps us store the user’s latitude and longitude. We only need to fetch it (note that in amap-wx.130. In the js file, replace all the wx inside with uni)
①Latitude and longitude
let userLocation = uni.getStorage({
key: 'userLocation'
})
② value
prints userLocation which resolves to promise
So we use promises. The method of then takes and assigns a value
③Attention
At the beginning, the following in onload
this.getStationList() This request is executed first, and then the latitude and longitude are printed. At this time, the latitude and longitude in the request are empty.
So add async await, you can get the latitude and longitude first and then send the request with the latitude and longitude
④
this.topHeight = height + top + 13
This 13 can be added or not according to the height of your prototype map
async onLoad() {
let userLocation = uni.getStorage({
key: 'userLocation'
})
await userLocation.then(data => {
let arr = data[1].data.split(',')
this.longitude = arr[0]
this.latitude = arr[1]
console.log(arr);
})
this.getStationList()
const {
height,
top
} = uni.getMenuButtonBoundingClientRect();
this.topHeight = height + top + 13
// console.log(this.topHeight, '高度');
},3.methods
① First send the getStationList request to obtain the array list information
First get obj.list (list array) to create a new marker array
It should be noted here that first obtain obj.list (list array) to create a new marker array , then first forEach, push (or for, push) returns a marker array
The id here cannot be replaced by index, and id, latitude, and longitude must be of Number type because my data is processed by paging. If index is used, there will be duplicate ids, which will cause some markers to disappear when zooming the map.
obj.list.forEach(item => {
// console.log(item, 'foreach');
this.marker.push({
id: Number(item.stationId),
iconPath: '/static/images/mapStation.png', //显示的图标
title: item.stationName,
latitude: Number(item.stationLat),
longitude: Number(item.stationLng),
width: 30, //宽
height: 30, //高
callout: { //自定义标记点上方的气泡窗口 点击有效
content: '空闲' + item.totalFree, //文本
color: '#ffffff', //文字颜色
fontSize: 15, //文本大小
borderRadius: 15, //边框圆角
padding: '10',
bgColor: '#406390', //背景颜色
display: 'ALWAYS', //常显
}
})
})After merging obj.list arrays and assigning values
this.mapList = this.mapList.concat(obj.list) (required in the field of view method)
async getStationList() {
console.log('发送请求前 打印用户经纬度', this.latitude, this.longitude);
const {
data: {
obj,
msg,
resCode
}
} = await uni.$http.post('/uniapp/pile/queryStationInfos', {
pageSize: this.pageSize,
pageNum: this.pageNum,
stationLng: this.longitude,
stationLat: this.latitude
})
console.log('queryStationInfos，查询充电站信息列表显示总数据', obj, msg, resCode);
if (resCode !== "00100000") return uni.$showMsg()
this.total = obj.total
// console.log('充电站信息列表 mapList', obj.list);
obj.list.forEach(item => {
// console.log(item, 'foreach');
this.marker.push({
id: Number(item.stationId),
iconPath: '/static/images/mapStation.png', //显示的图标
title: item.stationName,
latitude: Number(item.stationLat),
longitude: Number(item.stationLng),
width: 30, //宽
height: 30, //高
callout: { //自定义标记点上方的气泡窗口 点击有效
content: '空闲' + item.totalFree, //文本
color: '#ffffff', //文字颜色
fontSize: 15, //文本大小
borderRadius: 15, //边框圆角
padding: '10',
bgColor: '#406390', //背景颜色
display: 'ALWAYS', //常显
}
})
})
this.mapShow = true
this.mapList = this.mapList.concat(obj.list)
console.log(this.marker);
// for (let index in this.mapList) {
// let stationMarker = {
// iconPath: '/static/images/mapStation.png', //显示的图标
// id: Number(index) || 0,
// title: this.mapList[index].stationName || '',
// latitude: Number(this.mapList[index].stationLat),
// longitude: Number(this.mapList[index].stationLng),
// width: 30, //宽
// height: 30, //高
// callout: { //自定义标记点上方的气泡窗口 点击有效
// content: '空闲' + this.mapList[index].totalFree, //文本
// color: '#ffffff', //文字颜色
// fontSize: 15, //文本大小
// borderRadius: 15, //边框圆角
// padding: '10',
// bgColor: '#406390', //背景颜色
// display: 'ALWAYS', //常显
// }
// }
// // console.log(stationMarker, 'stationMarker');
// this.marker.push(stationMarker)
// }
}② The paging logic is triggered when the regionChange field of view changes
regionChange() {
this.tag = false
if (this.pageNum * this.pageSize >= this.total) return
this.pageNum++
this.getStationList()
},
③ callouttap When the bubble is clicked, it is triggered to find the array whose current marker id is equal to stationId
Here we should pay attention to a conversion of the next type e.detail.markerId --> it is a marker id which is a digital type
The stationId in mapList is a string type, so this needs to be converted. If not, click all the bubbles, and the content on the card will be displayed the same
callouttap(e) {
let id = String(e.detail.markerId)
// console.log(this.mapList, id);
let arr = this.mapList.find(item => {
return item.stationId === id
})
this.markerIdClick = [arr]
// console.log('点击id', id, '数组', this.markerIdClick);
this.tag = true
},
(4) style style
/deep/ .uni-searchbar__box-search-input {
color: #fff !important;
}
The input box is black by default
