第一首先看中心点上有个小图标
实现方式，我们可以使用map 结合一个图片覆盖物实现，在结合定位
<map id="myMap"
show-location
enable-poi
enable-building
:latitude="latitude"
:longitude="longitude"
:markers="markers"
@regionchange="anchorpointtapmap"
>
<cover-image class="img-map" src="../../static/mark.png" > </cover-image>
</map>
#myMap {
width: 100%;
height: 100%;
position: relative;
}
.img-map {
width: 54rpx;
height:80rpx;
position: absolute;
left: calc(50% - 0rpx);
top: calc(50% - 40rpx);
transform: translate(-50%,-50%);
}
.coview{
position: absolute;
bottom: 0px;
width: 100%;
height: 50px;
background: red;
}
当我们拖动的时候，点击刷新按钮让中心小图标回来
实现思路，当我们第一获取当前位置的时候，存储一个当前坐标
在移动回来
在data中定义两个字段
deflatitude:"",
deflongitude:"",
<cover-view class="backcenter" @click="backcenter()">
<cover-image style="width: 40px; height: 25px;margin: 8px 0px;" src="../../static/sx.png" ></cover-image >
</cover-view>
backcenter(){
this.$nextTick(() => {
const mapCtx = wx.createMapContext("myMap",this);
mapCtx.moveToLocation({
latitude:this.deflatitude,
longitude:this.deflongitude,
success:() => {
},
});
})
},
在
mounted() {
this.onAuthLocation();
}
onAuthLocation() {
var that =this;
uni.getLocation({
type: 'gcj02',
altitude:true,
isHighAccuracy:true,
success: function (res) {
that.latitude =res.latitude;
that.longitude =res.longitude;
that.deflatitude =res.latitude;
that.deflongitude =res.longitude;
}
});
},
充电宝小图标标注只要使用markers
在拖动地图的获取到对应坐标。后台返回当前坐标附近有充电宝的数组，赋值给markers 这里只做死数据演示。
完整代码
使用uni-app创建项目
pages.json
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "怪兽充电"
}
}
,{
"path" : "pages/nearshop/nearshop",
"style" :
{
"navigationBarTitleText": "附近门店",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/user/user",
"style" :
{
"navigationBarTitleText": "个人中心",
"enablePullDownRefresh": false,
"navigationStyle":"custom",
"app-plus":{
"titleView":false
}
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "怪兽充电",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
index.vue
<template>
<view class="page">
<view class="page-body">
<map id="myMap"
show-location
enable-poi
enable-building
:latitude="latitude"
:longitude="longitude"
:markers="markers"
@regionchange="anchorpointtapmap"
>
<cover-image class="img-map" src="../../static/mark.png" > </cover-image>
</map>
<view class="pop-up">
<view class="mian">
<view class="item1" @click="gonear(1)">
<image style="width: 30px; height: 30px; " :mode="aspectFit"
src="../../static/md.png"
></image>
<text>附近门店</text>
</view>
<view class="item2">
<button type="default" @click="scanCode">扫码充电</button>
</view>
<view class="item3" @click="gonear(3)">
<image style="width: 30px; height: 30px;" :mode="aspectFit"
src="../../static/user.png"
></image>
<text>个人中心</text>
</view>
</view>
</view>
<cover-view class="backcenter" @click="backcenter()">
<cover-image style="width: 40px; height: 25px;margin: 8px 0px;"
src="../../static/sx.png"
></cover-image >
</cover-view>
<cover-view class="sercharea" @click="serchArea()">
<cover-image style="width: 40px; height: 40px; "
src="../../static/serch.png"
></cover-image >
</cover-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
latitude:"",
longitude:"",
deflatitude:"",
deflongitude:"",
markers:[
{
id:1,
latitude:24.969814,
longitude:102.657425,
iconPath: '../../static/cd.png',
width: 40,
height: 40,
},
{
id:1,
latitude: 24.971656,
longitude:102.654897,
iconPath: '../../static/cd.png',
width: 40,
height: 40,
},
{
id:2,
latitude: 24.9691,
longitude:102.654088,
iconPath: '../../static/cd.png',
width: 40,
height: 40,
},
{
id:3,
latitude: 24.967334,
longitude:102.653383,
iconPath: '../../static/cd.png',
width: 40,
height: 40,
},
{
id:4,
latitude: 24.879703775535386,
longitude:102.8342279674439,
iconPath: '../../static/cd.png',
width: 40,
height: 40,
},
{
id:5,
latitude: 24.881493693603918,
longitude:102.83141852640438,
iconPath: '../../static/cd.png',
width: 40,
height: 40,
},
{
id:6,
latitude: 24.878327580546117,
longitude: 102.83307330796902,
iconPath: '../../static/cd.png',
width: 40,
height: 40,
},
]
}
},
onShow: function () {
},
methods: {
onAuthLocation() {
var that =this;
uni.getLocation({
type: 'gcj02',
altitude:true,
isHighAccuracy:true,
success: function (res) {
that.latitude =res.latitude;
that.longitude =res.longitude;
that.deflatitude =res.latitude;
that.deflongitude =res.longitude;
}
});
},
anchorpointtapmap(e){
console.log(e)
},
//扫码
scanCode(){
uni.scanCode({
onlyFromCamera: false,
success: function (res) {
console.log('条码类型：' + res.scanType);
console.log('条码内容：' + res.result);
}
});
},
//位置搜索
serchArea(){
var that =this;
uni.chooseLocation({
success: function (res) {
// console.log('位置名称：' + res.name);
// console.log('详细地址：' + res.address);
// that.address = res.address;
that.latitude=res.latitude;
that.longitude=res.longitude;
}
});
},
//返回中线点
backcenter(){
this.$nextTick(() => {
const mapCtx = wx.createMapContext("myMap",this);
mapCtx.moveToLocation({
latitude:this.deflatitude,
longitude:this.deflongitude,
success:() => {
console.log('我移过去了')
},
});
})
},
gonear(index){
if(index==1){
uni.navigateTo({
url: '/pages/nearshop/nearshop'
});
}else if(index==3){
uni.navigateTo({
url: '/pages/user/user'
});
}
}
},
mounted() {
this.onAuthLocation();
}
}
</script>
<style>
.page-body{
width: 100%;
height: 100%;
}
.page{
width: 100%;
height: 100%;
}
#myMap {
width: 100%;
height: 100%;
position: relative;
}
.img-map {
width: 54rpx;
height:80rpx;
position: absolute;
left: calc(50% - 0rpx);
top: calc(50% - 40rpx);
transform: translate(-50%,-50%);
}
.coview{
position: absolute;
bottom: 0px;
width: 100%;
height: 50px;
background: red;
}
/* 弹出层 */
.pop-up{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height:90px;
background-color:#fff;
z-index: 999999;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.mian{
width: 100%;
height: 100%;
display: flex;
}
.item1{
width: 100px;
height: 100%;
display: flex;
flex-direction:column;
align-items:center;
justify-content: center;
}
.item2{
flex: 1;
height: 100%;
position: relative;
}
.item2 button{
width: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
color: #fff;
background: #2cd7c7;
border-radius: 30rpx;
}
.item3{
width: 100px;
height: 100%;
display: flex;
flex-direction:column;
align-items:center;
justify-content: center;
}
.item3 text{
font-size: 30rpx;
color: #333;
padding: 2px;
}
.item1 text{
padding: 2px;
font-size: 30rpx;
color: #333;
}
.sercharea{
width: 40px;
height: 40px;
background: #fff;
position: fixed;
left: 10px;
bottom: 110px;
border-radius: 100%;
}
.backcenter{
width: 40px;
height: 40px;
background: #fff;
position: fixed;
left: 10px;
bottom:160px;
border-radius: 100%;
}
</style>
nearshop.vue
<template>
<view class="nearbox">
<view class="vul">
<view class="uli" v-for="(item,index) in list" :key='index' @click="selfn(index)"
:class="{active:index==current}">{{item}}</view>
</view>
<view class="viewmain">
<view v-if="current==0">
<view class="ullist" v-for="(item,index) in datalist" :key='index'>
<view class="listtop">
<view class="listtop_line">
<view class="item1">
<cover-image class="img" style="width: 80px; height: 80px; "
:src="item.pic"></cover-image>
</view>
<view class="item2">
<text class="txt1">{{item.name}}</text>
<text class="txt2">{{item.area}}</text>
<text class="txt3">营业时间:{{item.time}}</text>
</view>
<view class="item3">
990m
</view>
</view>
</view>
<view class="listboot">
<view v-if="item.type==1">
<text>{{item.info1}}</text> <text>{{item.info2}}</text>
</view>
<view v-if="item.type==2">
<text>{{item.info1}}</text> <text>{{item.info2}}</text><text class="colee5600">{{item.info3}}</text>
</view>
<view v-if="item.type==3">
<text>{{item.info1}}</text> <text class="colee5600">{{item.info3}}</text>
</view>
</view>
</view>
</view>
<view v-if="current==1">
<view class="ullist" v-for="(item,index) in datalist" :key='index'>
<view class="listtop">
<view class="listtop_line">
<view class="item1">
<cover-image class="img" style="width: 80px; height: 80px; "
:src="item.pic"></cover-image>
</view>
<view class="item2">
<text class="txt1">{{item.name}}</text>
<text class="txt2">{{item.area}}</text>
<text class="txt3">营业时间:{{item.time}}</text>
</view>
<view class="item3">
990m
</view>
</view>
</view>
<view class="listboot">
<view v-if="item.type==1">
<text>{{item.info1}}</text> <text>{{item.info2}}</text>
</view>
<view v-if="item.type==2">
<text>{{item.info1}}</text> <text>{{item.info2}}</text><text class="colee5600">{{item.info3}}</text>
</view>
<view v-if="item.type==3">
<text>{{item.info1}}</text> <text class="colee5600">{{item.info3}}</text>
</view>
</view>
</view>
</view>
<view v-if="current==2">
<view class="ullist" v-for="(item,index) in datalist" :key='index'>
<view class="listtop">
<view class="listtop_line">
<view class="item1">
<cover-image class="img" style="width: 80px; height: 80px; "
:src="item.pic"></cover-image>
</view>
<view class="item2">
<text class="txt1">{{item.name}}</text>
<text class="txt2">{{item.area}}</text>
<text class="txt3">营业时间:{{item.time}}</text>
</view>
<view class="item3">
990m
</view>
</view>
</view>
<view class="listboot">
<view v-if="item.type==1">
<text>{{item.info1}}</text> <text>{{item.info2}}</text>
</view>
<view v-if="item.type==2">
<text>{{item.info1}}</text> <text>{{item.info2}}</text><text class="colee5600">{{item.info3}}</text>
</view>
<view v-if="item.type==3">
<text>{{item.info1}}</text> <text class="colee5600">{{item.info3}}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
current: "0",
list: ["全部门店", "可用门店", "可还门店"],
datalist:[
{pic:"../../static/mendian/1.png",name:"云升会所(西路店)",area:"我二人B2号",time:"09:00-20:00",type:1,info1:'可用',info2:'可还'},
{pic:"../../static/mendian/2.png",name:"就撒旦而且我说的",area:"我二人B2号",time:"09:00-20:00",type:2,info1:'可用',info2:'可还',info3:'(即将还满,请尽快前往)'},
{pic:"../../static/mendian/3.png",name:"云升会所(我去恩去我恩)",area:"我二人B2号",time:"09:00-20:00",type:2,info1:'可用',info2:'可还',info3:'(即将还满,请尽快前往)'},
{pic:"../../static/mendian/4.png",name:"去我恩 (西路店)",area:"我二人B2号",time:"09:00-20:00",type:3,info1:'可用',info2:'可还',info3:'(即将还满,请尽快前往)',info4:'无法归还充电宝，请选择其他门店'},
{pic:"../../static/mendian/5.png",name:"说的发生的(我的)",area:"我儿 B2号",time:"09:00-20:00",type:1,info1:'可用',info2:'可还'},
{pic:"../../static/mendian/6.png",name:"云升会所(我儿万人)",area:"我二人B2号",time:"09:00-20:00",type:2,info1:'可用',info2:'可还',info3:'(即将还满,请尽快前往)'},
{pic:"../../static/mendian/7.png",name:"生栋覆屋(我放)",area:"关金柳露路二期B2号",time:"09:00-20:00",type:3,info1:'可用',info2:'可还',info3:'(即将还满,请尽快前往)',info4:'无法归还充电宝，请选择其他门店'},
{pic:"../../static/mendian/8.png",name:"士大夫我师父(任汝芬)",area:"人物而3 B2号",time:"09:00-20:00",type:3,info1:'可用',info2:'可还',info3:'(即将还满,请尽快前往)',info4:'无法归还充电宝，请选择其他门店'}
]
}
},
methods: {
selfn(index) {
this.current = index;
if(index==1){
this.unlist();
}else if(index==2){
this.unlist();
}
},
//随机打乱绥组
shuffle(a) {
var len = a.length;
for(var i=0;i<len;i++){
var end = len - 1 ;
var index = (Math.random()*(end + 1)) >> 0;
var t = a[end];
a[end] = a[index];
a[index] = t;
}
return a;
},
unlist(){
this.datalist = this.shuffle(this.datalist);
}
}
}
</script>
<style scoped>
.nearbox {
width: 100%;
height: 100%;
background: #f4f4f4;
}
.vul {
width: 100%;
height: 30px;
display: flex;
}
.uli {
flex: 1;
text-align: center;
line-height: 30px;
color: #2CD7C7;
font-weight: bold;
font-size: 15px;
}
.active {
border-bottom: 2px solid #2CD7C7;
}
.ullist {
width: 95%;
height: 130px;
margin: 8px auto;
background: #fff;
border-radius: 8px;
}
.listtop {
width: 100%;
height: 100px;
}
.listboot {
width: 100%;
height: 30px;
font-size: 13px;
line-height: 30px;
text-indent: 20px;
color: #333;
}
.colee5600{
color: #ee5600;
}
.listboot text{
margin: 0 3px;
}
.listtop .listtop_line {
width: 95%;
height: 98%;
margin: 0 auto;
border-bottom: 1px solid #f4f4f4;
display: flex;
}
.listtop_line .item1 {
width: 100px;
height: 100%;
}
.listtop_line .item1 .img {
margin: 10px;
border-radius: 5px;
}
.listtop_line .item2 {
flex: 1;
display: flex;
flex-direction: column;
}
.item2 .txt1 {
font-size: 15px;
color: #333333;
line-height: 30px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
}
.item2 .txt2 {
font-size: 13px;
color: #999;
line-height: 30px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.item2 .txt3 {
font-size: 13px;
color: #666;
line-height: 30px;
}
.listtop_line .item3 {
width: 50px;
height: 100%;
text-align: center;
line-height: 98px;
color: #999999;
font-size: 14px;
}
</style>
user.vue
<template>
<view>
<view>
<view class="status_bar">
<!-- 这里是状态栏 -->
</view>
<view class="userinfo">
<view class="userinfotop">
</view>
<view class="infoboot">
<view class="left">
<cover-image v-if="isauto" class="img" style="width: 80px; height: 80px; "
:src="userinfo.avatarUrl"></cover-image>
<button v-if="!isauto" class='login-btn' @click="bindGetUserInfo"> </button>
</view>
<view class="right">{{userinfo.nickName}}</view>
</view>
<view class="back">
<cover-image @click="goback()" class="img" style="width: 20px; height: 20px;"
src="../../static/back.png"></cover-image>
</view>
</view>
<view class="listmain">
<view style="margin-top: 20px;">
<view class="list">
<cover-image class="imgs" style="width: 30px; height: 30px; " src="../../static/a1.png">
</cover-image>
<text class="txt">我的钱包</text>
<cover-image class="imgs" style="width: 30px; height: 30px; " src="../../static/nest.png">
</cover-image>
</view>
<view class="list">
<cover-image class="imgs1" style="width: 30px; height: 30px; " src="../../static/a2.png">
</cover-image>
<text class="txt">我的订单</text>
<cover-image class="imgs" style="width: 30px; height: 30px; " src="../../static/nest.png">
</cover-image>
</view>
<view class="list">
<cover-image class="imgs1" style="width: 30px; height: 30px; " src="../../static/a3.png">
</cover-image>
<text class="txt">我的卷包</text>
<cover-image class="imgs" style="width: 30px; height: 30px; " src="../../static/nest.png">
</cover-image>
</view>
<view class="list">
<cover-image class="imgs1" style="width: 30px; height: 30px; " src="../../static/a4.png">
</cover-image>
<text class="txt">消息管理</text>
<cover-image class="imgs" style="width: 30px; height: 30px; " src="../../static/nest.png">
</cover-image>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
userinfo: {},
isauto: false
}
},
methods: {
goback() {
uni.navigateBack()
},
bindGetUserInfo() {
var _this = this
//新版登录方式
uni.getUserProfile({
desc: '获取您个人信息用于登录！',
success: (res) => {
uni.setStorageSync('userinfo', res.userInfo);
_this.userinfo = res.userInfo
_this.isauto = true;
},
fail: (res) => {
// uni.showModal({
// title: '授权提示',
// content: '如果拒绝授权，将不能获取你的个人信息',
// success: function (res) {
// if (res.confirm) {
// wx.openSetting({
// success: res => {
// if (res.authSetting['scope.userInfo']) {
// // 授权成功，重新定位
// console.log("授权成功，重新定位")
// } else {
// // 没有允许定位权限
// wx.showToast({
// title: '您拒绝了权限，将无法使用个人信息',
// icon: 'none'
// });
// }
// }
// });
// } else if (res.cancel) {
// console.log('用户点击取消');
// }
// }
// });
}
})
},
},
created: function() {
const value = uni.getStorageSync('userinfo');
if (value) {
this.isauto = true;
this.userinfo = value;
}
}
}
</script>
<style scoped>
.status_bar {
height: var(--status-bar-height);
width: 100%;
}
.userinfo {
width: 100%;
height: 170px;
position: relative;
}
.userinfo .userinfotop {
width: 100%;
height: 170px;
position: absolute;
top: 0px;
left: 0px;
background: #2CD7C7;
filter: blur(15px);
background-size: 100% 100%;
}
.infoboot {
width: 100%;
height: 100px;
position: absolute;
top: 50px;
left: 0px;
display: flex;
}
.back {
width: 100%;
height: 40px;
position: absolute;
top: 0px;
left: 0px;
}
.back .img {
margin: 10px;
}
.left {
width: 100px;
height: 100px;
position: relative;
}
.left .img {
border-radius: 100%;
width: 80px;
height: 80px;
position: absolute;
top: 0px;
left: 10px;
}
.login-btn {
border-radius: 100%;
width: 80px;
height: 80px;
background: red;
position: absolute;
top: 0px;
left: 10px;
background: url("../../static/pic.png");
background-size: cover;
}
.right {
flex: 1;
text-align: left;
line-height: 100px;
font-size: 18px;
color: #fff;
margin-left: 10px;
}
.listmain {
width: 100%;
min-height: 500px;
margin: -20px auto 0px auto;
background: #fff;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
z-index: 1;
}
.list {
display: flex;
width: 95%;
height: 40px;
margin: 5px auto;
}
.list .imgs1 {
width: 50px;
height: 100%;
margin: 5px;
}
.list .txt {
flex: 1;
line-height: 40px;
margin-left: 10px;
font-weight: 400;
}
.list .imgs {
width: 50px;
height: 100%;
margin: 5px;
}
</style>
static图片下载地址
链接：https://pan.baidu.com/s/1qaDvZLLvNdSaTXIOTn9cvg
提取码：1111