351 lines
6.4 KiB
Vue
351 lines
6.4 KiB
Vue
<template>
|
|
<view class="container">
|
|
<headers title="便民地图"></headers>
|
|
<map style="width: 100%;height: 714rpx;" :layer-style='5' :latitude="latitude" :longitude="longitude"
|
|
:markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap' @tap="tap">
|
|
</map>
|
|
<view class="c-box">
|
|
|
|
<view class="box-top">
|
|
<!-- 可选项 -->
|
|
<view class="bt-box" v-for="(item,index) in arr" :key="index" @click="getlist(item.id)">
|
|
<view class="bt-img">
|
|
<image :src="baseImageUrl + item.icon" mode=""></image>
|
|
</view>
|
|
<view class="zi" :class="{'sy' :ggindex == item.id }">{{item.title}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="bot-di " @click="zhankai()" v-if="num == 8">
|
|
<view style="margin-bottom: 10rpx;">展开更多信息</view>
|
|
|
|
<uni-icons type="bottom" size="16" color="#5BA8FF"></uni-icons>
|
|
|
|
</view>
|
|
<view class="bot-di " @click="shou()" v-if="num != 8">
|
|
<view style="margin-bottom: 10rpx;">收起</view>
|
|
|
|
<uni-icons type="top" size="16" color="#5BA8FF"></uni-icons>
|
|
|
|
</view>
|
|
</view>
|
|
<!-- 渲染的数据 -->
|
|
<view class="dz-box" v-for="(item,index) in arrlist" :key="index" @click="godetails(item.id)">
|
|
<view class="dz-left">
|
|
<image :src="baseImageUrl + item.imgs[0]" mode=""></image>
|
|
</view>
|
|
<view class="dz-right">
|
|
<view class="dz-title">{{item.title}}</view>
|
|
<view class="dz-hui">
|
|
<view class=""><uni-icons type="phone" size="14"></uni-icons></view>
|
|
<view class="slue">{{item.tel}}</view>
|
|
</view>
|
|
<view class="dz-hui">
|
|
<view class=""><uni-icons type="location" size="14"></uni-icons></view>
|
|
<view class="slue">{{item.address}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import headers from '../../components/headers/headers.vue'
|
|
import {
|
|
request
|
|
} from "@/request/index.js"
|
|
export default {
|
|
data() {
|
|
return {
|
|
ggindex: '',
|
|
page: 1,
|
|
num: 8,
|
|
arrlist: [],
|
|
arr: [],
|
|
latitude: 36.858810, //纬度
|
|
longitude: 117.749930, //经度
|
|
scale: 13, //缩放级别
|
|
compass: true,
|
|
marker: [],
|
|
baseImageUrl: this.$baseImageUrl
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
onShow() {
|
|
this.huo()
|
|
this.getmap()
|
|
},
|
|
components: {
|
|
headers,
|
|
},
|
|
onShareAppMessage(res) {
|
|
// if (res.from === 'button') {// 来自页面内分享按钮
|
|
// console.log(res.target)
|
|
// }
|
|
return utils.sendFriend()
|
|
},
|
|
onShareTimeline(res) {
|
|
return utils.sendCircle()
|
|
},
|
|
methods: {
|
|
zhankai() {
|
|
this.num = 999
|
|
this.getmap()
|
|
},
|
|
shou() {
|
|
this.num = 8
|
|
this.getmap()
|
|
},
|
|
async getlist(id) {
|
|
this.ggindex = id
|
|
const res = await request({
|
|
url: 'GetMapList',
|
|
data: {
|
|
id: id,
|
|
page: 1,
|
|
num: 9999
|
|
}
|
|
})
|
|
|
|
uni.showLoading({
|
|
title: "加载中",
|
|
})
|
|
|
|
|
|
let arrlist = res.data
|
|
|
|
this.arrlist = arrlist
|
|
|
|
let arrcopy = [];
|
|
|
|
for (var i = 0; i < arrlist.length; i++) {
|
|
|
|
let obj = {}
|
|
|
|
obj.id = arrlist[i].id
|
|
|
|
obj.latitude = arrlist[i].lat
|
|
|
|
obj.longitude = arrlist[i].lng
|
|
|
|
obj.iconPath = arrlist[i].iconPath
|
|
|
|
obj.rotate = 0
|
|
|
|
obj.width = 25
|
|
|
|
obj.height = 25
|
|
|
|
obj.alpha = 1
|
|
|
|
let callout = {}
|
|
|
|
callout.content = ''
|
|
|
|
callout.color = '#ffffff'
|
|
|
|
callout.fontSize = 0
|
|
|
|
callout.borderRadius = 0
|
|
|
|
callout.borderWidth = '0'
|
|
|
|
callout.bgColor = 'transparent'
|
|
|
|
callout.display = 'ALWAYS'
|
|
|
|
console.log(obj);
|
|
|
|
obj.callout = callout
|
|
|
|
arrcopy.push(obj)
|
|
|
|
}
|
|
|
|
this.marker = arrcopy;
|
|
uni.hideLoading()
|
|
|
|
},
|
|
huo() {
|
|
uni.getLocation({
|
|
type: 'wgs84',
|
|
success: function(res) {
|
|
console.log('当前位置的经度：' + res.longitude);
|
|
console.log('当前位置的纬度：' + res.latitude);
|
|
this.latitude = res.latitude
|
|
this.longitude = res.longitude
|
|
}
|
|
});
|
|
},
|
|
async getmap() {
|
|
const res = await request({
|
|
url: 'GetMap',
|
|
data: {
|
|
page: this.page,
|
|
num: this.num
|
|
}
|
|
|
|
})
|
|
|
|
this.arr = res.data
|
|
|
|
this.getlist(res.data[0].id)
|
|
},
|
|
godetails(id) {
|
|
uni.navigateTo({
|
|
url: "/pages/map/mapDetails?id=" + id
|
|
})
|
|
},
|
|
// 点击标记点时触发
|
|
markertap(e) {
|
|
console.log('点击标记点时触发', e)
|
|
},
|
|
// 点击标记点对应的气泡时触发，
|
|
callouttap(e) {
|
|
console.log('点击标记点对应的气泡时触发', e)
|
|
},
|
|
// 点击地图时触发
|
|
tap(e) {
|
|
console.log('点击地图时触发', e)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.container {
|
|
box-sizing: border-box;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
|
|
.c-box {
|
|
width: 95%;
|
|
margin: 0 auto;
|
|
box-sizing: border-box;
|
|
border-bottom: 2rpx solid #EEEEEE;
|
|
// box-sizing: border-box;
|
|
// padding-bottom: 40rpx;
|
|
}
|
|
|
|
.box-top {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
|
|
.bt-box {
|
|
width: 25%;
|
|
margin-top: 30rpx;
|
|
|
|
.bt-img {
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
margin: 0 auto;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.zi {
|
|
margin-top: 20rpx;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
line-height: 24rpx;
|
|
}
|
|
|
|
}
|
|
|
|
// 蓝杠
|
|
|
|
}
|
|
|
|
.bot-di {
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
line-height: 24rpx;
|
|
color: #5BA8FF;
|
|
margin: 0rpx auto;
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.dz-box {
|
|
margin: 0 auto;
|
|
width: 95%;
|
|
height: 220rpx;
|
|
border-bottom: 2rpx solid #EEEEEE;
|
|
box-sizing: border-box;
|
|
padding: 30rpx 0px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
|
|
}
|
|
|
|
.dz-left {
|
|
width: 256rpx;
|
|
height: 160rpx;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
margin-right: 20rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.dz-right {
|
|
width: 55%;
|
|
}
|
|
|
|
.dz-title {
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.dz-hui {
|
|
width: 100%;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
display: flex;
|
|
margin-top: 20rpx;
|
|
// display: -webkit-box;
|
|
// overflow: hidden;
|
|
// text-overflow: ellipsis;
|
|
// -webkit-line-clamp: 1;
|
|
// -webkit-box-orient: vertical;
|
|
}
|
|
|
|
.slue {
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.sy {
|
|
color: #5BA8FF !important;
|
|
font-weight: bold !important;
|
|
}
|
|
</style>
|