目次
①まずgetStationListリクエストを送信してアレイリスト情報を取得する
② regionChange の視野が変わると、ページングロジックがトリガーされます
③ callouttap バブルがクリックされると、現在のマーカー ID が stationId と等しい配列を見つけるためにトリガーされます
スタイル浸透を使用して、入力ボックスのフォントの色を変更します
レンダリング
この効果は、現在のページに入り、自分の緯度と経度を表示し、現在の pageSize バー データを pageSize と pageNum に従って表示します. マップ ビューが変更された場合、 this.pageNum * this.pageSize >= this.total と判断し、これを許可 し ます.pageNum++, let all データは地図上に表示されます
合計コード
<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>分析する
1. テンプレートページ
（1）
<tabbar :current="current"></tabbar> current: 1 このページはカスタム タブ バーです
（2）
追加の動的スタイルも :style="{'margin-top':topHeight+'px'}" に変更できます
<view class="search" :style="{top:topHeight+'px'}">
<searchBar @click="search" :city="city"></searchBar>
</view>
入力ボックスをカプセルの下側にするのが動的スタイルで、searchBarはカプセル化したコンポーネントです
レンダリング
（3）
<cardList :stationList="markerIdClick" v-if="tag" style="position: fixed;top: 70%;"></cardList>
カプセル化したコンポーネントです v-if="tag" はデフォルトでは表示されません バブルをクリックすると表示されるカード情報
（4）
地図表示コード
<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>マップ コンポーネントでは 、次の 2 つの方法のみを使用しました。
①@地域変更
視野が変わると内部でページネーションが行われ、
②@callouttap
マーカーをクリックするとカードの内容が表示されます
2.オンロード
このページが表示されるとすぐに
最初に緯度と経度を取得します. このメソッドは以前に Gaode amap-wx.130.jsを使用したために使用されます. このファイルはユーザーの緯度と経度を保存するのに役立ちます. フェッチするだけで済みます (amap で-wx.130. js ファイルで、内部のすべての wx を uni に置き換えます)
①緯度経度
let userLocation = uni.getStorage({ key: 'userLocation' })
②値
promise に解決される userLocation を出力します
そのため、promise を使用します。then のメソッドは、値を取得して割り当てます
③ご注意
最初に、onload で次のようにします。
this.getStationList() このリクエストが最初に実行され、次に緯度と経度が出力されます.このとき、リクエスト内の緯度と経度は空です.
したがって、async await を追加すると、最初に緯度と経度を取得してから、緯度と経度でリクエストを送信できます。
④
this.topHeight = 高さ + 上 + 13
この 13 は、プロトタイプ マップの高さに応じて追加または追加できません。
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.方法
①まずgetStationListリクエストを送信してアレイリスト情報を取得する
最初に obj.list (リスト配列) を取得して、新しいマーカー配列を作成します
ここで、最初に obj.list (リスト配列) を取得して新しいマーカー配列を作成し、次に最初に forEach、push (または for、push) がマーカー配列を返すことに注意してください。
The id here cannot be replacement by index, and id, latitude, and longitude must be Number types because my data is processing by paging. インデックスを使用すると、ID が重複し、マップをズームすると一部のマーカーが消えます。 .
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', //常显
}
})
})obj.list 配列をマージして値を割り当てた後
this.mapList = this.mapList.concat(obj.list) (視野メソッドで必要)
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)
// }
}② regionChange の視野が変わると、ページングロジックがトリガーされます
regionChange() { this.tag = false if (this.pageNum * this.pageSize >= this.total) return this.pageNum++ this.getStationList() },
③ callouttap バブルがクリックされると、現在のマーカー ID が stationId と等しい配列を見つけるためにトリガーされます
ここで、次の型 e.detail.markerId の変換に注意する必要があります --> デジタル型のマーカー ID です
mapList の stationId は文字列型なので、これを変換する必要があります。そうでない場合は、すべてのバブルをクリックすると、カードのコンテンツが同じように表示されます。
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)スタイルスタイル
/deep/ .uni-searchbar__box-search-input { color: #fff !important; }
入力ボックスはデフォルトで黒です
