效果图
template
<template>
<view>
<!-- 搜索框开始 -->
<view class="search1">
<view class="search-head">
<view class="search-head-img2">
<image class="search-head-img2-ss"
src="https://lgzf.oss-cn-chengdu.aliyuncs.com/appImgs/static/images/search.png" mode=""></image>
</view>
<view class="search-head-input">
<input class="search-head-input-title" confirm-type="search" @confirm="doSearch"
v-model="searchValue" type="text" value="" placeholder="搜索位置" />
</view>
</view>
</view>
<view class="page-body">
<view class="page-section page-section-gap">
<map style="width: 100%; height: 640px;" :latitude="latitude" :longitude="longitude" scale="16"
:markers="markers" :show-location="true" @markertap="markertap">
</map>
</view>
</view>
<view class="grounding-person">
<view class="grounding-person-item" v-for="(item,index) in list" :key='index' @click="details(item)"
style="padding-bottom: 20rpx;padding-top: 50rpx">
<view class="grounding-person-item1">
<view class="grounding-person-item-left">
<image :src="item.coverUrl" mode="">
</image>
</view>
<view class="grounding-person-item-right">
<view class="grounding-person-item-right-name">
<view class="daikan">媒体编号:</view>
<view class="daikan" style="margin-left: 10rpx;">
{{item.code}}
</view>
</view>
<view class="grounding-person-item-right-name">
<view class="gq">媒体形式:</view>
<view class="gq">
{{item.modality}}
</view>
</view>
<view class="grounding-person-item-right-name">
<view class="gq">媒体位置:</view>
<view class="gq">
{{item.mediaArea}}
</view>
</view>
</view>
<view class="grounding-person-item-left">
<view class="bbkh" v-if="item.mediaStatus == 1">
可售
</view>
<view class="bbkh" v-else style="background-color: #FEC616;">
已售
</view>
<!-- <view v-else class="ysyy">
当前预约3人
</view> -->
<view class="bbkh1" @click.native.stop="lookLocation($event)" >
查看位置
</view>
</view>
</view>
</view>
</view>
</view>
</template>
script
<script>
import media from '@/api/media.js'; // 自己的后台api 接口
export default {
data() {
return {
markers: [], // 标记点数组
poisdatas: [{}, {}, {}], // 位置
title: 'map',
pageNum: 1,
pageSize: 20,
searchValue: '',
latitude: 30.208487,
longitude: 120.21202,
list: [],
}
},
onLoad() {
var that = this;
var amapFile = require('../../common/amap-wx.130.js');
// 文件地址：https://blog-static.cnblogs.com/files/blogs/739947/amap-wx.130.js?t=1653967259
var amapPlugin = new amapFile.AMapWX({
key: "自己申请的key"
});
let _self = this;
amapPlugin.getRegeo({
success: (res) => {
console.log(res); //可自己查看所需返回值取用
_self.address = res[0].regeocodeData.formatted_address;
_self.latitude = res[0].latitude; //纬度
_self.longitude = res[0].longitude; //经度
// uni.showModal({
// title: "高德地图坐标",
// content: "经纬度：[" + _self.latitude + "," + _self.longitude + "]"
// })
console.log("经纬度：[" + _self.latitude + "," + _self.longitude + "]");
this.getDataList();
},
fail: (data) => {
console.log(data)
}
})
},
methods: {
// 阻止前往详情事件
lookLocation(e){
e.preventDefault(); // 阻止事件冒泡穿透
console.log('查看位置');
},
// 搜索事件
doSearch() {
console.log(this.searchValue);
},
// 前往详情
details(item) {
//console.log(item)
let detailsId = item.id
uni.navigateTo({
url: '../component/details?detailsId=' + detailsId
})
},
//得到点击的marker的id，遍历markers数组，判断有没有相等的id
//如果有的就能从this.poisdatas[i].address得到坐标位置（没有就提醒下）
markertap: function(e) {
for (var i = 0; i < this.markers.length; i++) {
if (JSON.stringify(e).substring(18, 20) == this.markers[i].id) {
console.log("markers" + this.poisdatas[i].name + " " + this.poisdatas[i].address);
uni.showToast({
title: this.poisdatas[i].name,
mask: false,
duration: 1500
});
}
}
},
getDataList() {
var that = this
var data = {
pageNum: that.pageNum,
pageSize: that.pageSize,
lng: that.longitude,
lat: that.latitude,
keyWord: that.searchValue
}
console.log('medialist-data', data);
media.mediaList(data).then(res => {
var temp = res[1].data.rows;
this.list = temp;
var markers_new = [];
temp.forEach(function(item, index) {
markers_new.push({
//id: item.id, //marker 序号
latitude: item.lat, //marker 纬度
longitude: item.lng, //marker 经度
})
})
console.log(markers_new);
that.markers = markers_new;
})
},
}
}
</script>
css - less
<style lang="less">
// 搜索框
.search1 {
background-color: #FFFFFF;
height: 100%;
width: 100%;
// padding-bottom: 25rpx;
.search-head {
// width: 700rpx;//556
height: 68rpx;
width: 100%;
line-height: 68rpx;
background: #FFFFFF;
border-radius: 34rpx;
position: fixed;
top: 0;
z-index: 111;
display: flex;
position: relative;
border: 2rpx solid #DB373C;
position: fixed;
top: 0;
.search-head-name {
width: 110rpx;
height: 68rpx;
line-height: 68rpx;
text-align: center;
font-size: 28rpx;
font-family: Source Han Sans CN;
font-weight: bold;
color: #3C4045;
}
.search-head-img {
width: 14rpx;
position: relative;
// background-color: #000000;
.search-head-img1 {
width: 12rpx;
height: 8rpx;
position: absolute;
top: 30rpx;
left: -18rpx;
}
}
.search-head-xian {
width: 2rpx;
height: 26rpx;
background: #E7E8E8;
margin-top: 22rpx;
}
.search-head-img2 {
width: 40rpx;
.search-head-img2-ss {
width: 34rpx;
height: 36rpx;
margin-left: 19rpx;
margin-top: 20rpx;
}
}
.search-head-input {
margin-left: 26rpx;
.search-head-input-title {
height: 68rpx;
font-size: 24rpx;
font-family: Source Han Sans CN;
font-weight: 400;
line-height: 68rpx;
color: #808080;
width: 350rpx;
}
}
.search-head-cancel {
position: absolute;
right: -140rpx;
color: #333333;
font-size: 28rpx;
color: #DB373C;
}
.search-head-cancel1 {
position: absolute;
right: -80rpx;
color: #333333;
font-size: 28rpx;
color: #DB373C;
}
}
}
// 浮动内容
.grounding-person {
padding: 10rpx 24rpx 10rpx 24rpx;
width: 100%;
position: fixed;
bottom: 0;
height: 540rpx;
overflow-y: scroll;
.grounding-person-item {
width: 100%;
background-color: #FFFFFF;
padding: 24rpx 0;
margin-bottom: 24rpx;
padding-bottom: 20rpx;
position: relative;
.grounding-person-item1 {
width: 100%;
// margin: 48rpx auto;
padding: 0 24rpx;
display: flex;
position: relative;
.grounding-person-item-left {
width: 116rpx;
height: 126rpx;
// border: 1rpx solid #000000;
// border-radius: 50%;
position: relative;
// display: none;
.bbkh {
color: #FFFFFF;
text-align: center;
border-radius: 10rpx;
width: 110rpx;
height: 40rpx;
line-height: 40rpx;
font-size: 25rpx;
background-color: #00DA6B;
position: absolute;
top: 10rpx;
left: 0rpx;
}
.bbkh1 {
color: #FFFFFF;
text-align: center;
border-radius: 10rpx;
width: 110rpx;
height: 40rpx;
line-height: 40rpx;
font-size: 25rpx;
background-color: #DB373C;
position: absolute;
top: 80rpx;
left: 0rpx;
}
}
.grounding-person-item-left1 {
width: 116rpx;
height: 116rpx;
// border: 1rpx solid #000000;
border-radius: 50%;
// display: none;
image {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.grounding-person-item-right {
width: 77%;
height: 164rpx;
// border: 1rpx solid #000000;
margin-left: 32rpx;
position: relative;
.grounding-person-item-right-name {
line-height: 44rpx;
// background-color: #007AFF;
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
.daikan {
font-size: 30rpx;
font-family: Source Han Sans CN;
font-weight: 400;
font-weight: bold;
color: #000000;
line-height: 32rpx;
}
.gq {
margin-top: 10rpx;
font-size: 24rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #636161;
line-height: 32rpx;
}
}
.dianhau {
position: absolute;
right: 0;
top: 0;
width: 84rpx;
height: 84rpx;
// border: 1rpx solid #000000;
image {
width: 100%;
height: 100%;
}
}
.dianhau1 {
position: absolute;
right: 0;
top: 0;
width: 120rpx;
height: 60rpx;
color: #FFFFFF;
line-height: 60rpx;
background-color: #FF0066;
text-align: center;
border-radius: 30rpx;
}
.jt {
position: absolute;
right: 0;
top: 29rpx;
width: 14rpx;
height: 22rpx;
// border: 1rpx solid #000000;
image {
width: 100%;
height: 100%;
}
}
.grounding-person-item-right-phone {
font-size: 32rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #000000;
line-height: 32rpx;
margin-top: 24rpx;
}
.grounding-person-item-right-time {
font-size: 24rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #666666;
line-height: 32rpx;
// margin-top: 24rpx;
padding-top: 16rpx;
position: relative;
.span3 {
position: absolute;
top: 16rpx;
right: 0;
}
span {
color: #DB373C;
}
}
}
}
}
}
</style>
本文来自博客园，作者：depressiom，转载请注明原文链接：https://www.cnblogs.com/depressiom/p/16329820.html
