parent
ab5302d11c
commit
7f395169f8
@ -1,177 +1,441 @@ |
|||||||
<template> |
<template> |
||||||
<view class="content"> |
<view class="map-container"> |
||||||
<map style="width: 100%; height: 90vh;" :style="{height:mapheight}" :show-location='true' :latitude="latitude" |
<map style="width: 100%; height: 10vh;" :style="{height:mapheight}" :show-location='true' :latitude="latitude" |
||||||
:longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap'> |
:longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap'> |
||||||
</map> |
<!-- <cover-view class="cover-view-loca" :style='{bottom:coverbottom}' @click="onControltap"> |
||||||
</view> |
<cover-image class="cover-image" @click="play" src="../../../static/img/adresw.png"></cover-image> |
||||||
</template> |
<cover-view> |
||||||
|
定位 |
||||||
<script> |
</cover-view> |
||||||
export default { |
</cover-view> --> |
||||||
data() { |
<!-- 一级分类 --> |
||||||
return { |
<view class="width100 cover-views mart15"> |
||||||
latitude: 23.106574, //纬度 |
<scroll-view class="width90 cover-view-cont" scroll-x="true"> |
||||||
longitude: 113.324587, //经度 |
<view class="cover-view-head font14" :class="[typeid == item.id ? 'onclick' : '']" |
||||||
scale: 13, //缩放级别 |
v-for="(item,index) in marker" :key="index" @click="changeType(item)">全部全部{{index}}</view> |
||||||
bottomData: false, |
</scroll-view> |
||||||
marker: [{ |
<!-- 二级分类 --> |
||||||
id: 0, |
<view class="width100 mart15 backcorfff cover-viewchage alijus fotct" style="border-radius: 22px;"> |
||||||
latitude: 23.13065, //纬度 |
<view class="font14 width30w" :class="[selectFirst == 1? 'onchange' : '']" |
||||||
longitude: 113.3274, //经度 |
@click="changeChilerType()">全部 |
||||||
iconPath: '../../../static/img/user/user5.png', //显示的图标 |
<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image> |
||||||
rotate: 0, // 旋转度数 |
</view> |
||||||
width: 20, //宽 |
<view class="font14 width30w" :class="[selectFirst == 1? 'onchange' : '']">全部 |
||||||
height: 20, //高 |
<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image> |
||||||
// title:'我在这里',//标注点名 |
</view> |
||||||
alpha: 0.9, //透明度 |
<view class="font14 width30w"> |
||||||
callout: { //自定义标记点上方的气泡窗口 点击有效 |
<!-- 全部 |
||||||
content: '天宝大厦', //文本 |
<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image> --> |
||||||
color: '#ffffff', //文字颜色 |
</view> |
||||||
fontSize: 14, //文本大小 |
</view> |
||||||
borderRadius: 22, //边框圆角 |
</view> |
||||||
borderWidth: '10', |
<!-- //模态框 --> |
||||||
bgColor: '#e51860', //背景颜色 |
<view class="change-cont" v-if="selectChiler == 1"> |
||||||
display: 'ALWAYS', //常显 |
<view class="width100 backcorfff"></view> |
||||||
}, |
</view> |
||||||
}, |
<!-- //显示内容 --> |
||||||
{ |
<view class="change-optiac paddbotm20" v-if="selectChiler == 1"> |
||||||
id: 1234597, |
<scroll-view scroll-y="true" class="width100 height260"> |
||||||
latitude: 23.106574, //纬度 |
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"> |
||||||
longitude: 113.324587, //经度 |
<view class="width90w" :class="[selectFirst == 1? 'onchange' : '']">发生地方是发生地方</view> |
||||||
iconPath: '../../../static/img/user/user5.png', //显示的图标 |
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image> |
||||||
rotate: 0, // 旋转度数 |
</view> |
||||||
width: 20, //宽 |
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"> |
||||||
height: 20, //高 |
<view class="width90w">发生地方是发生地方</view> |
||||||
// title:'我在这里',//标注点名 |
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image> |
||||||
alpha: 0.9, //透明度 |
</view> |
||||||
// label:{//为标记点旁边增加标签 //因背景颜色H5不支持 |
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"> |
||||||
// color:'red',//文本颜色 |
<view class="width90w">发生地方是发生地方</view> |
||||||
// }, |
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image> |
||||||
callout: { //自定义标记点上方的气泡窗口 点击有效 |
</view> |
||||||
content: '广州塔', //文本 |
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"> |
||||||
color: '#ffffff', //文字颜色 |
<view class="width90w">发生地方是发生地方</view> |
||||||
fontSize: 14, //文本大小 |
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image> |
||||||
borderRadius: 22, //边框圆角 |
</view> |
||||||
borderWidth: '10', |
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"> |
||||||
bgColor: '#e51860', //背景颜色 |
<view class="width90w">发生地方是发生地方</view> |
||||||
display: 'ALWAYS', //常显 |
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image> |
||||||
}, |
</view> |
||||||
}, |
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"> |
||||||
{ |
<view class="width90w">发生地方是发生地方</view> |
||||||
id: 2, |
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image> |
||||||
latitude: 23.1338, //纬度 |
</view> |
||||||
longitude: 113.33052, //经度 |
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"> |
||||||
iconPath: '../../../static/img/user/user5.png', //显示的图标 |
<view class="width90w">发生地方是发生地方</view> |
||||||
rotate: 0, // 旋转度数 |
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image> |
||||||
width: 20, //宽 |
</view> |
||||||
height: 20, //高 |
</scroll-view> |
||||||
alpha: 0.9, //透明度 |
</view> |
||||||
callout: { //自定义标记点上方的气泡窗口 点击有效 |
|
||||||
content: '德隆大厦', //文本 |
<!-- 未打开筛选前 --> |
||||||
color: '#ffffff', //文字颜色 |
<view class="cover-view-foot" @click="updateSelected(2)" v-if="isSelected == 1"> |
||||||
fontSize: 14, //文本大小 |
<view class="line-view"></view> |
||||||
borderRadius: 22, //边框圆角 |
<view class="mart10 fcor666 font13 width100">发现更多商户</view> |
||||||
borderWidth: '10', |
<view class="input-box"> |
||||||
bgColor: '#e51860', //背景颜色 |
<input placeholder="搜索商品" v-model="couponName" placeholder-style="color:#c0c0c0;" |
||||||
display: 'ALWAYS', //常显 |
@input="toSearch()" /> |
||||||
}, |
</view> |
||||||
}, |
</view> |
||||||
{ |
|
||||||
id: 3, |
<!-- 打开筛选后 --> |
||||||
latitude: 23.136455, //纬度 |
<view class="cover-view-foot-behind" @click="updateSelected(1)" v-if="isSelected == 2"> |
||||||
longitude: 113.329002, //经度 |
<view class="line-view"></view> |
||||||
iconPath: '../../../static/img/user/user5.png', //显示的图标 |
<view class="mart10 fcor666 font13 width100">发现更多商户</view> |
||||||
rotate: 0, // 旋转度数 |
<view class="input-box"> |
||||||
width: 20, //宽 |
<input placeholder="搜索商品" v-model="couponName" placeholder-style="color:#c0c0c0;" |
||||||
height: 20, //高 |
@input="toSearch()" /> |
||||||
alpha: 0.9, //透明度 |
</view> |
||||||
callout: { //自定义标记点上方的气泡窗口 点击有效 |
<scroll-view class="scoroll-cont mart10" scroll-y="true"> |
||||||
content: '羊城国际商贸中心', //文本 |
<view class="height45 width100" @click.stop="updateSelected(1)">收到粉丝都是短发舒服</view> |
||||||
color: '#ffffff', //文字颜色 |
|
||||||
fontSize: 14, //文本大小 |
</scroll-view> |
||||||
borderRadius: 22, //边框圆角 |
</view> |
||||||
borderWidth: '10', |
|
||||||
bgColor: '#e51860', //背景颜色 |
</map> |
||||||
display: 'ALWAYS', //常显 |
</view> |
||||||
}, |
</template> |
||||||
}, |
<script> |
||||||
{ |
let app = getApp(); |
||||||
id: 4, |
export default { |
||||||
latitude: 23.224781, //纬度 |
data() { |
||||||
longitude: 113.293911, //经度 |
return { |
||||||
iconPath: '../../../static/img/user/user5.png', //显示的图标 |
latitude: 23.106574, //纬度 |
||||||
rotate: 0, // 旋转度数 |
longitude: 113.324587, //经度 |
||||||
width: 20, //宽 |
scale: 13, //缩放级别 |
||||||
height: 20, //高 |
bottomData: false, |
||||||
alpha: 0.9, //透明度 |
imagewxUrl: app.globalData.imageWxImg, |
||||||
callout: { //自定义标记点上方的气泡窗口 点击有效 |
imgadres2: 'xiala.png', |
||||||
content: '天瑞广场A座', //文本 |
marker: [{ |
||||||
color: '#ffffff', //文字颜色 |
id: 0, |
||||||
fontSize: 16, //文本大小 |
latitude: 23.13065, //纬度 |
||||||
borderRadius: 22, //边框圆角 |
longitude: 113.3274, //经度 |
||||||
borderWidth: '12', |
iconPath: '../../../static/img/user/user5.png', //显示的图标 |
||||||
bgColor: '#e51860', //背景颜色 |
rotate: 0, // 旋转度数 |
||||||
display: 'ALWAYS', //常显 |
width: 20, //宽 |
||||||
}, |
height: 30, //高 |
||||||
}, |
// title:'我在这里',//标注点名 |
||||||
{ |
alpha: 0.5, //透明度 |
||||||
id: 5, |
callout: { //自定义标记点上方的气泡窗口 点击有效 |
||||||
latitude: 23.072726, //纬度 |
content: '天宝大厦', //文本 |
||||||
longitude: 113.277921, //经度 |
color: '#ffffff', //文字颜色 |
||||||
iconPath: '../../../static/img/user/user5.png', //显示的图标 |
fontSize: 14, //文本大小 |
||||||
rotate: 0, // 旋转度数 |
borderRadius: 15, //边框圆角 |
||||||
width: 20, //宽 |
borderWidth: '10', |
||||||
height: 20, //高 |
bgColor: '#e51860', //背景颜色 |
||||||
alpha: 0.9, //透明度 |
display: 'ALWAYS', //常显 |
||||||
callout: { //自定义标记点上方的气泡窗口 点击有效 |
}, |
||||||
content: '大米和小米儿童康复(广州盈丰)中心', //文本 |
}, |
||||||
color: '#ffffff', //文字颜色 |
{ |
||||||
fontSize: 14, //文本大小 |
id: 1234597, |
||||||
borderRadius: 22, //边框圆角 |
latitude: 23.106574, //纬度 |
||||||
borderWidth: '8', |
longitude: 113.324587, //经度 |
||||||
bgColor: '#e51860', //背景颜色 |
iconPath: '../../../static/img/user/user5.png', //显示的图标 |
||||||
display: 'ALWAYS', //常显 |
rotate: 0, // 旋转度数 |
||||||
}, |
width: 20, //宽 |
||||||
}, |
height: 30, //高 |
||||||
], |
// title:'我在这里',//标注点名 |
||||||
} |
alpha: 0.5, //透明度 |
||||||
}, |
// label:{//为标记点旁边增加标签 //因背景颜色H5不支持 |
||||||
onLoad() { |
// color:'red',//文本颜色 |
||||||
|
// }, |
||||||
}, |
callout: { //自定义标记点上方的气泡窗口 点击有效 |
||||||
computed: { |
content: '广州塔', //文本 |
||||||
mapheight() { |
color: '#ffffff', //文字颜色 |
||||||
let data = '' |
fontSize: 14, //文本大小 |
||||||
if (this.bottomData) { |
borderRadius: 15, //边框圆角 |
||||||
if (this.upTop) { |
borderWidth: '10', |
||||||
data = '50px' |
bgColor: '#e51860', //背景颜色 |
||||||
} else { |
display: 'ALWAYS', //常显 |
||||||
data = '200px' |
}, |
||||||
} |
}, |
||||||
} else { |
{ |
||||||
data = '90vh' |
id: 2, |
||||||
} |
latitude: 23.1338, //纬度 |
||||||
return data |
longitude: 113.33052, //经度 |
||||||
}, |
iconPath: '../../../static/img/user/user5.png', //显示的图标 |
||||||
coverbottom() { |
rotate: 0, // 旋转度数 |
||||||
let data = '' |
width: 20, //宽 |
||||||
if (this.bottomData) { |
height: 30, //高 |
||||||
data = '20rpx' |
alpha: 0.5, //透明度 |
||||||
} else { |
callout: { //自定义标记点上方的气泡窗口 点击有效 |
||||||
data = '100rpx' |
content: '德隆大厦', //文本 |
||||||
} |
color: '#ffffff', //文字颜色 |
||||||
return data |
fontSize: 14, //文本大小 |
||||||
} |
borderRadius: 15, //边框圆角 |
||||||
}, |
borderWidth: '10', |
||||||
methods: { |
bgColor: '#e51860', //背景颜色 |
||||||
//地图点击事件 |
display: 'ALWAYS', //常显 |
||||||
markertap(e) { |
}, |
||||||
console.log("===你点击了标记点===", e) |
}, |
||||||
}, |
{ |
||||||
//地图点击事件 |
id: 3, |
||||||
callouttap(e) { |
latitude: 23.136455, //纬度 |
||||||
console.log('地图点击事件', e) |
longitude: 113.329002, //经度 |
||||||
} |
iconPath: '../../../static/img/user/user5.png', //显示的图标 |
||||||
} |
rotate: 0, // 旋转度数 |
||||||
} |
width: 20, //宽 |
||||||
</script> |
height: 30, //高 |
||||||
|
alpha: 0.5, //透明度 |
||||||
|
callout: { //自定义标记点上方的气泡窗口 点击有效 |
||||||
|
content: '羊城国际商贸中心', //文本 |
||||||
|
color: '#ffffff', //文字颜色 |
||||||
|
fontSize: 14, //文本大小 |
||||||
|
borderRadius: 15, //边框圆角 |
||||||
|
borderWidth: '10', |
||||||
|
bgColor: '#e51860', //背景颜色 |
||||||
|
display: 'ALWAYS', //常显 |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 4, |
||||||
|
latitude: 23.224781, //纬度 |
||||||
|
longitude: 113.293911, //经度 |
||||||
|
iconPath: '../../../static/img/user/user5.png', //显示的图标 |
||||||
|
rotate: 0, // 旋转度数 |
||||||
|
width: 20, //宽 |
||||||
|
height: 30, //高 |
||||||
|
alpha: 0.5, //透明度 |
||||||
|
callout: { //自定义标记点上方的气泡窗口 点击有效 |
||||||
|
content: '天瑞广场A座', //文本 |
||||||
|
color: '#ffffff', //文字颜色 |
||||||
|
fontSize: 16, //文本大小 |
||||||
|
borderRadius: 15, //边框圆角 |
||||||
|
borderWidth: '12', |
||||||
|
bgColor: '#e51860', //背景颜色 |
||||||
|
display: 'ALWAYS', //常显 |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 5, |
||||||
|
latitude: 23.072726, //纬度 |
||||||
|
longitude: 113.277921, //经度 |
||||||
|
iconPath: '../../../static/img/user/user5.png', //显示的图标 |
||||||
|
rotate: 0, // 旋转度数 |
||||||
|
width: 20, //宽 |
||||||
|
height: 30, //高 |
||||||
|
alpha: 0.5, //透明度 |
||||||
|
callout: { //自定义标记点上方的气泡窗口 点击有效 |
||||||
|
content: '大米和小米儿童康复(广州盈丰)中心', //文本 |
||||||
|
color: '#ffffff', //文字颜色 |
||||||
|
fontSize: 14, //文本大小 |
||||||
|
borderRadius: 15, //边框圆角 |
||||||
|
borderWidth: '8', |
||||||
|
bgColor: '#e51860', //背景颜色 |
||||||
|
display: 'ALWAYS', //常显 |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
typeid: 0, //选择分类 |
||||||
|
isSelected: 1, //是否选择下拉 |
||||||
|
selectFirst: 1, //筛选是否有值 |
||||||
|
selectChiler: 1, // 子菜单筛选 |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
onLoad() { |
||||||
|
|
||||||
|
}, |
||||||
|
computed: { |
||||||
|
mapheight() { |
||||||
|
let data = '' |
||||||
|
if (this.bottomData) { |
||||||
|
if (this.upTop) { |
||||||
|
data = '50px' |
||||||
|
} else { |
||||||
|
data = '200px' |
||||||
|
} |
||||||
|
} else { |
||||||
|
data = '100vh' |
||||||
|
} |
||||||
|
return data |
||||||
|
}, |
||||||
|
coverbottom() { |
||||||
|
let data = '' |
||||||
|
if (this.bottomData) { |
||||||
|
data = '20rpx' |
||||||
|
} else { |
||||||
|
data = '200rpx' |
||||||
|
} |
||||||
|
return data |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
methods: { |
||||||
|
//地图点击事件 |
||||||
|
markertap(e) {}, |
||||||
|
//地图点击事件 |
||||||
|
callouttap(e) { |
||||||
|
console.log('地图点击事件', e) |
||||||
|
}, |
||||||
|
// 定位点击事件 |
||||||
|
onControltap() { |
||||||
|
|
||||||
|
}, |
||||||
|
//选择类型 |
||||||
|
changeType(item) { |
||||||
|
this.typeid = item.id; |
||||||
|
}, |
||||||
|
//子菜单显示 |
||||||
|
changeChilerType() { |
||||||
|
if (this.selectChiler == 1) { |
||||||
|
this.selectChiler = 2; |
||||||
|
} else { |
||||||
|
this.selectChiler = 1; |
||||||
|
} |
||||||
|
}, |
||||||
|
// 是否选择下拉 |
||||||
|
updateSelected(item) { |
||||||
|
this.isSelected = item; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style lang='less' scoped> |
||||||
|
.map-container { |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
.cover-views { |
||||||
|
position: absolute; |
||||||
|
z-index: 99999; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.cover-view-cont { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
flex-wrap: nowrap; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
|
||||||
|
.cover-view-head { |
||||||
|
height: 35px; |
||||||
|
line-height: 35px; |
||||||
|
background-color: #fff; |
||||||
|
display: inline-table; |
||||||
|
flex-direction: column; |
||||||
|
text-align: center; |
||||||
|
position: relative; |
||||||
|
margin-right: 15px; |
||||||
|
border-radius: 22px; |
||||||
|
padding: 0 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.cover-viewchage { |
||||||
|
height: 35px; |
||||||
|
} |
||||||
|
|
||||||
|
.onchange { |
||||||
|
color: #089bf5; |
||||||
|
} |
||||||
|
|
||||||
|
.onclick { |
||||||
|
background-color: #089bf5; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.cover-view-loca { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
width: 40px; |
||||||
|
height: 40px; |
||||||
|
color: #484848; |
||||||
|
background-color: #fff; |
||||||
|
background-size: 60px 60px; |
||||||
|
background-position: center center; |
||||||
|
position: absolute; |
||||||
|
bottom: 100px; |
||||||
|
right: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.cover-image { |
||||||
|
display: inline-block; |
||||||
|
width: 15px; |
||||||
|
height: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.cover-view-foot { |
||||||
|
text-align: center; |
||||||
|
height: 200rpx; |
||||||
|
background-color: #fff; |
||||||
|
position: absolute; |
||||||
|
bottom: 0px; |
||||||
|
width: 100%; |
||||||
|
border-radius: 18px 18px 0 0; |
||||||
|
} |
||||||
|
|
||||||
|
.change-cont { |
||||||
|
position: absolute; |
||||||
|
z-index: 99999999; |
||||||
|
top: 100px; |
||||||
|
background-color: #333; |
||||||
|
width: 100%; |
||||||
|
opacity: 0.8; |
||||||
|
height: calc(100% - 100px); |
||||||
|
} |
||||||
|
|
||||||
|
.change-optiac { |
||||||
|
position: absolute; |
||||||
|
z-index: 99999999; |
||||||
|
top: 100px; |
||||||
|
width: 100%; |
||||||
|
background-color: #fff; |
||||||
|
height: 260px; |
||||||
|
} |
||||||
|
|
||||||
|
.cover-view-foot-behind { |
||||||
|
text-align: center; |
||||||
|
height: calc(100% - 110px); |
||||||
|
background-color: #fff; |
||||||
|
position: absolute; |
||||||
|
z-index: 999999; |
||||||
|
bottom: 0px; |
||||||
|
width: 100%; |
||||||
|
border-radius: 18px 18px 0 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.scoroll-cont { |
||||||
|
height: calc(100% - 80px); |
||||||
|
} |
||||||
|
|
||||||
|
.line-view { |
||||||
|
width: 10%; |
||||||
|
margin-left: 45%; |
||||||
|
height: 5px; |
||||||
|
border-radius: 12px; |
||||||
|
margin-top: 10px; |
||||||
|
background-color: #f0f0f0; |
||||||
|
} |
||||||
|
|
||||||
|
.input-box { |
||||||
|
width: 90%; |
||||||
|
margin-left: 5%; |
||||||
|
margin-top: 5px; |
||||||
|
text-align: left; |
||||||
|
height: 70rpx; |
||||||
|
background-color: #f0f0f0; |
||||||
|
border-radius: 22px; |
||||||
|
position: relative; |
||||||
|
align-items: center; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
input { |
||||||
|
padding-left: 12px; |
||||||
|
padding-right: 12px; |
||||||
|
height: 30px; |
||||||
|
color: #666; |
||||||
|
font-size: 14px; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.onclick { |
||||||
|
background-color: #089bf5; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue