|
|
@@ -1,92 +1,109 @@
|
|
|
-
|
|
|
<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'
|
|
|
- v-if="mapShow">
|
|
|
- <view class="cover-view">
|
|
|
- <view style="margin-top: 20rpx;" @click="onControltap">
|
|
|
- <image class="cover-image" src="@/static/image/food/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>
|
|
|
+ <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' v-if="mapShow">
|
|
|
+ <view class="cover-view">
|
|
|
+ <view @click="onControltap">
|
|
|
+ <image class="cover-image" src="@/static/image/food/dw.png"></image>
|
|
|
+ </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
|
|
|
- },
|
|
|
- getList(){
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- this.$request.baseRequest('admin.tourism.foodInfo', 'foodList', {
|
|
|
+ import {
|
|
|
+ authorizedLocation
|
|
|
+ } from '@/util/util.js'
|
|
|
+ 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() {
|
|
|
+ this.isdingwei()
|
|
|
+ this.getStationList()
|
|
|
+ const {
|
|
|
+ height,
|
|
|
+ top
|
|
|
+ } = uni.getMenuButtonBoundingClientRect();
|
|
|
+ this.topHeight = height + top + 13
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ isdingwei() {
|
|
|
+ authorizedLocation().then(res => {
|
|
|
+ let _obj = {}
|
|
|
+ if (res == '取消授权') {
|
|
|
+ //获取上一次，无上一次山海广场
|
|
|
+ let _place = uni.getStorageSync("LocationPlace")
|
|
|
+ if (_place && _place.latitude) {
|
|
|
+ _obj = {
|
|
|
+ latitude: _place.latitude,
|
|
|
+ longitude: _place.longitude
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ _obj = {
|
|
|
+ latitude: 40.22086204872,
|
|
|
+ longitude: 122.08338497727
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ } else {
|
|
|
+ _obj = {
|
|
|
+ latitude: res.latitude,
|
|
|
+ longitude: res.longitude
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.longitude = _obj.longitude
|
|
|
+ this.latitude = _obj.latitude
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 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();
|
|
|
+ },
|
|
|
+ //气泡点击事件
|
|
|
+ callouttap(e) {
|
|
|
+ let id = String(e.detail.markerId)
|
|
|
+ let arr = this.mapList.find(item => {
|
|
|
+ return item.stationId === id
|
|
|
+ })
|
|
|
+ this.markerIdClick = [arr]
|
|
|
+ this.tag = true
|
|
|
+ },
|
|
|
+ getList() {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ this.$request.baseRequest('admin.tourism.foodInfo', 'foodList', {
|
|
|
page: 1,
|
|
|
limit: 9999,
|
|
|
}, failres => {
|
|
|
@@ -95,111 +112,116 @@
|
|
|
title: failres.errmsg,
|
|
|
duration: 3000
|
|
|
});
|
|
|
-
|
|
|
+
|
|
|
}).then(res => {
|
|
|
uni.hideLoading()
|
|
|
- resolve(res)
|
|
|
+ resolve(res)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async getStationList() {
|
|
|
+ console.log('发送请求前 打印用户经纬度', this.latitude, this.longitude);
|
|
|
+ const data = await this.getList()
|
|
|
+ console.log('queryStationInfos，信息列表显示总数据', data);
|
|
|
+ this.total = data.total
|
|
|
+ data.data.items.forEach(item => {
|
|
|
+ item.latitude = item.location.split(',')[0]
|
|
|
+ item.longitude = item.location.split(',')[1]
|
|
|
+ this.marker.push({
|
|
|
+ id: Number(item.id),
|
|
|
+ iconPath: '/static/image/food/location.png', //显示的图标
|
|
|
+ latitude: Number(item.latitude),
|
|
|
+ longitude: Number(item.longitude),
|
|
|
+ label:{
|
|
|
+ content:item.shopNames,
|
|
|
+ textAlign:"left",
|
|
|
+ x: Number(item.latitude),
|
|
|
+ y: Number(item.longitude),
|
|
|
+ },
|
|
|
+ width: 30,
|
|
|
+ height: 30,
|
|
|
+ // callout: { //气泡窗口
|
|
|
+ // content: '空闲', //文本
|
|
|
+ // color: '#ffffff',
|
|
|
+ // fontSize: 15,
|
|
|
+ // borderRadius: 15,
|
|
|
+ // padding: '10',
|
|
|
+ // bgColor: '#406390',
|
|
|
+ // display: 'ALWAYS', //常显
|
|
|
+ // }
|
|
|
})
|
|
|
- })
|
|
|
- },
|
|
|
- async getStationList() {
|
|
|
- console.log('发送请求前 打印用户经纬度', this.latitude, this.longitude);
|
|
|
- const data = await this.getList()
|
|
|
- console.log('queryStationInfos，信息列表显示总数据', data);
|
|
|
- this.total = data.total
|
|
|
- data.data.items.forEach(item => {
|
|
|
- item.latitude=item.location.split(',')[0]
|
|
|
- item.longitude=item.location.split(',')[1]
|
|
|
- this.marker.push({
|
|
|
- id: Number(item.id),
|
|
|
- iconPath: '/static/image/food/location.png', //显示的图标
|
|
|
- latitude: Number(item.latitude),
|
|
|
- longitude: Number(item.longitude),
|
|
|
- width: 30,
|
|
|
- height: 30,
|
|
|
- callout: { //气泡窗口
|
|
|
- content: '空闲' , //文本
|
|
|
- color: '#ffffff',
|
|
|
- fontSize: 15,
|
|
|
- borderRadius: 15,
|
|
|
- padding: '10',
|
|
|
- bgColor: '#406390',
|
|
|
- display: 'ALWAYS', //常显
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- this.mapShow = true
|
|
|
- this.mapList = this.mapList.concat(data.data.items)
|
|
|
- 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)
|
|
|
- // }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ })
|
|
|
+ this.mapShow = true
|
|
|
+ this.mapList = this.mapList.concat(data.data.items)
|
|
|
+ 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;
|
|
|
+ /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;
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
+ padding: 10rpx 15rpx;
|
|
|
+ color: #4F575F;
|
|
|
+ font-weight: 400;
|
|
|
+ background-color: #fff;
|
|
|
+ background-position: center center;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 300rpx;
|
|
|
+ right: 30rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .cover-image {
|
|
|
+ display: inline-block;
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
