You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
441 lines
13 KiB
441 lines
13 KiB
<template>
|
|
<view class="map-container">
|
|
<map style="width: 100%; height: 10vh;" :style="{height:mapheight}" :show-location='true' :latitude="latitude"
|
|
:longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap'>
|
|
<!-- <cover-view class="cover-view-loca" :style='{bottom:coverbottom}' @click="onControltap">
|
|
<cover-image class="cover-image" @click="play" src="../../../static/img/adresw.png"></cover-image>
|
|
<cover-view>
|
|
定位
|
|
</cover-view>
|
|
</cover-view> -->
|
|
<!-- 一级分类 -->
|
|
<view class="width100 cover-views mart15">
|
|
<scroll-view class="width90 cover-view-cont" scroll-x="true">
|
|
<view class="cover-view-head font14" :class="[typeid == item.id ? 'onclick' : '']"
|
|
v-for="(item,index) in marker" :key="index" @click="changeType(item)">全部全部{{index}}</view>
|
|
</scroll-view>
|
|
<!-- 二级分类 -->
|
|
<view class="width100 mart15 backcorfff cover-viewchage alijus fotct" style="border-radius: 22px;">
|
|
<view class="font14 width30w" :class="[selectFirst == 1? 'onchange' : '']"
|
|
@click="changeChilerType()">全部
|
|
<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image>
|
|
</view>
|
|
<view class="font14 width30w" :class="[selectFirst == 1? 'onchange' : '']">全部
|
|
<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image>
|
|
</view>
|
|
<view class="font14 width30w">
|
|
<!-- 全部
|
|
<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- //模态框 -->
|
|
<view class="change-cont" v-if="selectChiler == 1">
|
|
<view class="width100 backcorfff"></view>
|
|
</view>
|
|
<!-- //显示内容 -->
|
|
<view class="change-optiac paddbotm20" v-if="selectChiler == 1">
|
|
<scroll-view scroll-y="true" class="width100 height260">
|
|
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart">
|
|
<view class="width90w" :class="[selectFirst == 1? 'onchange' : '']">发生地方是发生地方</view>
|
|
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart">
|
|
<view class="width90w">发生地方是发生地方</view>
|
|
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart">
|
|
<view class="width90w">发生地方是发生地方</view>
|
|
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart">
|
|
<view class="width90w">发生地方是发生地方</view>
|
|
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart">
|
|
<view class="width90w">发生地方是发生地方</view>
|
|
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart">
|
|
<view class="width90w">发生地方是发生地方</view>
|
|
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart">
|
|
<view class="width90w">发生地方是发生地方</view>
|
|
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<!-- 未打开筛选前 -->
|
|
<view class="cover-view-foot" @click="updateSelected(2)" v-if="isSelected == 1">
|
|
<view class="line-view"></view>
|
|
<view class="mart10 fcor666 font13 width100">发现更多商户</view>
|
|
<view class="input-box">
|
|
<input placeholder="搜索商品" v-model="couponName" placeholder-style="color:#c0c0c0;"
|
|
@input="toSearch()" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 打开筛选后 -->
|
|
<view class="cover-view-foot-behind" @click="updateSelected(1)" v-if="isSelected == 2">
|
|
<view class="line-view"></view>
|
|
<view class="mart10 fcor666 font13 width100">发现更多商户</view>
|
|
<view class="input-box">
|
|
<input placeholder="搜索商品" v-model="couponName" placeholder-style="color:#c0c0c0;"
|
|
@input="toSearch()" />
|
|
</view>
|
|
<scroll-view class="scoroll-cont mart10" scroll-y="true">
|
|
<view class="height45 width100" @click.stop="updateSelected(1)">收到粉丝都是短发舒服</view>
|
|
|
|
</scroll-view>
|
|
</view>
|
|
|
|
</map>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
let app = getApp();
|
|
export default {
|
|
data() {
|
|
return {
|
|
latitude: 23.106574, //纬度
|
|
longitude: 113.324587, //经度
|
|
scale: 13, //缩放级别
|
|
bottomData: false,
|
|
imagewxUrl: app.globalData.imageWxImg,
|
|
imgadres2: 'xiala.png',
|
|
marker: [{
|
|
id: 0,
|
|
latitude: 23.13065, //纬度
|
|
longitude: 113.3274, //经度
|
|
iconPath: '../../../static/img/user/user5.png', //显示的图标
|
|
rotate: 0, // 旋转度数
|
|
width: 20, //宽
|
|
height: 30, //高
|
|
// title:'我在这里',//标注点名
|
|
alpha: 0.5, //透明度
|
|
callout: { //自定义标记点上方的气泡窗口 点击有效
|
|
content: '天宝大厦', //文本
|
|
color: '#ffffff', //文字颜色
|
|
fontSize: 14, //文本大小
|
|
borderRadius: 15, //边框圆角
|
|
borderWidth: '10',
|
|
bgColor: '#e51860', //背景颜色
|
|
display: 'ALWAYS', //常显
|
|
},
|
|
},
|
|
{
|
|
id: 1234597,
|
|
latitude: 23.106574, //纬度
|
|
longitude: 113.324587, //经度
|
|
iconPath: '../../../static/img/user/user5.png', //显示的图标
|
|
rotate: 0, // 旋转度数
|
|
width: 20, //宽
|
|
height: 30, //高
|
|
// title:'我在这里',//标注点名
|
|
alpha: 0.5, //透明度
|
|
// label:{//为标记点旁边增加标签 //因背景颜色H5不支持
|
|
// color:'red',//文本颜色
|
|
// },
|
|
callout: { //自定义标记点上方的气泡窗口 点击有效
|
|
content: '广州塔', //文本
|
|
color: '#ffffff', //文字颜色
|
|
fontSize: 14, //文本大小
|
|
borderRadius: 15, //边框圆角
|
|
borderWidth: '10',
|
|
bgColor: '#e51860', //背景颜色
|
|
display: 'ALWAYS', //常显
|
|
},
|
|
},
|
|
{
|
|
id: 2,
|
|
latitude: 23.1338, //纬度
|
|
longitude: 113.33052, //经度
|
|
iconPath: '../../../static/img/user/user5.png', //显示的图标
|
|
rotate: 0, // 旋转度数
|
|
width: 20, //宽
|
|
height: 30, //高
|
|
alpha: 0.5, //透明度
|
|
callout: { //自定义标记点上方的气泡窗口 点击有效
|
|
content: '德隆大厦', //文本
|
|
color: '#ffffff', //文字颜色
|
|
fontSize: 14, //文本大小
|
|
borderRadius: 15, //边框圆角
|
|
borderWidth: '10',
|
|
bgColor: '#e51860', //背景颜色
|
|
display: 'ALWAYS', //常显
|
|
},
|
|
},
|
|
{
|
|
id: 3,
|
|
latitude: 23.136455, //纬度
|
|
longitude: 113.329002, //经度
|
|
iconPath: '../../../static/img/user/user5.png', //显示的图标
|
|
rotate: 0, // 旋转度数
|
|
width: 20, //宽
|
|
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> |