十年河东，十年河西，莫欺少年穷
学无止境，精益求精
来个效果图
wxml
<navigationBar title="网点" navigationtype="switchTab" navigationurl="/pages/index/index" hasback="{{false}}"
bgc="#284CBB" color="#fff">
</navigationBar>
<view class="page">
<map class="map" bindtap='maptap' latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}"
bindmarkertap="bidMark" show-location scale="11">
</map>
<view wx:if="{{online}}" catchtap="onlineclick" class="online">在线总量：1000 <span class="sj"></span></view>
<view class="onlineinfo" catchtap="onlineclick" wx:if="{{!online}}">
<view class="lineinfo">
在线总量：1000 <span class="sjinfo"></span>
</view>
<view class="linenum">
<view class="linenuminfo">
<view class="linetxt">空闲</view>
<view style="color:#16B7AD;font-size:30rpx">90</view>
<view class="linetxt">违停</view>
<view style="color:#284CBB;font-size:30rpx">90</view>
<view class="linetxt">骑行</view>
<view style="color:#FC685E;font-size:30rpx">90</view>
</view>
</view>
</view>
<view class="carinfo" wx:if="{{isshow}}">
<view class="carbox">
<image src="{{imgUrl}}mtico.png" class="mtico" mode="widthFix"></image>
<view class="carboxinfo">
<view class="cartle">美团单车</view>
<view class="cartleinfo">车辆编号：877382</view>
</view>
<image src="{{imgUrl}}yellowcar.png" class="mtcar" mode="widthFix"></image>
</view>
</view>
</view>View Code
js
import * as config from "../../utils/config/config"
const app = getApp()
import * as request from "../../utils/request/request.js"
import Dialog from '../../miniprogram_npm/@vant/weapp/dialog/dialog';
Page({
/**
* 页面的初始数据
*/
data: {
online: true,
viewShow: false,
scor: true,
isshow:false,
latitude: "",
longitude: "",
imgUrl: config.config.swagger.imgUrl,
itemDetail: {},
markers: [{
latitude: 31.26249,
longitude: 120.63212,
iconPath: "https://portal.one5a.com/DEV/images/cgt/qixing.png",
height: "142rpx",
width: "128rpx",
id: 0
},
{
latitude: 31.27249,
longitude: 120.67212,
iconPath: "https://portal.one5a.com/DEV/images/cgt/weiting.png",
height: "142rpx",
width: "128rpx",
id: 1
},
{
latitude: 31.25249,
longitude: 120.57212,
iconPath: "https://portal.one5a.com/DEV/images/cgt/site.png",
height: "142rpx",
width: "128rpx",
id: 2,
label: {
content: "12",
color: "#fff",
fontSize: "32rpx",
anchorY: -52,
anchorX: -10
}
}
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let that = this;
this.getLoc();
},
onlineclick() {
let that = this;
that.setData({
online: !that.data.online
})
},
bidMark(e) {
let that = this;
let mrkId = e.detail.markerId;
console.log(e)
console.log(mrkId)
if(mrkId>1){
wx.showModal({
title: '停车点',
content: '苏州南门停车点\r\n停放车辆10',
showCancel: false,
})
}
else{
wx.hideTabBar({
animation: false,
})
that.setData({
isshow:true,
})
}
},
maptap(){
let that = this;
wx.showTabBar({
animation: false,
})
that.setData({
isshow:false,
})
},
//导航功能
// bidMark(e) {
// console.log(e);
// let that = this;
// let mrkId = e.detail.markerId;
// console.log(mrkId)
// let mapMrk = that.data.markers.find(A => == mrkId);
// console.log(mapMrk)
// //
// var latitude = mapMrk.latitude;
// var longitude = mapMrk.longitude;
// wx.openLocation({
// latitude: latitude,
// longitude: longitude,
// name: '五安能源',
// })
// },
getLoc() {
let that = this;
wx.getLocation({
type: 'wgs84',
success(res) {
const latitude = res.latitude
const longitude = res.longitude
that.setData({
latitude,
longitude
})
}
})
},
// 拨打电话
// makePhoneCall() {
// var that = this
// wx.makePhoneCall({
// phoneNumber: "18137070152"
// })
// },
})
View Code
css
/* pages/map/map.wxss */
page {
height: 100vh;
overflow: hidden;
}
.map {
width: 100%;
height: 100vh;
}
.online {
width: 320rpx;
height: 100rpx;
background-color: #fff;
color: #363D50;
position: fixed;
left: 30rpx;
top: 15%;
z-index: 999;
font-size: 32rpx;
font-weight: 620;
padding: 0 0 0 32rpx;
line-height: 100rpx;
}
.sj {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-left: 10px solid #000;
border-bottom: 6px solid transparent;
display: inline-block;
margin-left: 20rpx;
}
.onlineinfo {
width: 660rpx;
height: 230rpx;
background-color: #fff;
color: #363D50;
position: absolute;
left: 30rpx;
top: 15%;
z-index: 10000;
}
.lineinfo {
font-size: 32rpx;
font-weight: 620;
padding: 0 0 0 32rpx;
line-height: 100rpx;
height: 100rpx;
}
.linenum {
margin-top: 0rpx;
line-height: 100rpx;
height: 100rpx;
}
.linenuminfo {
margin: 0 0 0 40rpx;
background-color: #F5F9FB;
width: 580rpx;
height: 100rpx;
display: flex;
justify-content: space-around;
}
.linetxt {
color: #374856;
font-size: 30rpx;
font-weight: 600;
}
.sjinfo {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid red;
display: inline-block;
margin-left: 50%;
}
.carinfo {
position: fixed;
width: 100%;
height: 240rpx;
background: #fff;
top: calc(100vh - 240rpx);
}
.carbox {
display: flex;
justify-content: space-around;
}
.mtico{
width: 128rpx; margin-top: 60rpx;
}
.carboxinfo{
display: flex;
flex-direction: column; margin-top: 68rpx;
align-items: center;
}
.cartle{
font-size: 34rpx;
color: #232734;
font-weight: 620;
}
.cartleinfo{
font-size: 26rpx;
color: #6A6D7E;
font-weight: 580;
margin-top: 22rpx;
}
.mtcar{
width: 268rpx;margin-top: 30rpx;
}
View Code
json
{
"usingComponents": {
"van-dialog": "@vant/weapp/dialog/index",
"navigationBar":"../../Components/navigationBar/navigationBar"},
"navigationStyle": "custom",
"navigationBarTextStyle":"white"
}navigationBar
js
var app = getApp();
Component({
/**
* 组件的属性列表
*/
properties: {
title: { //导航栏标题
type: String,
value: "wecaht"
},
navigationtype: { //跳转方式
type: String,
value: "navigateTo"
},
navigationurl: { //URL
type: String,
value: "/pages/index/index"
},
hasback: { //URL
type: Boolean,
value: true
}
,
isBlack: { //URL
type: Boolean,
value: true
},
bgc: { //URL
type: String,
value: "#a2e6e7"
},
color: { //URL
type: String,
value: "#000"
},
},
/**
* 组件的初始数据
*/
data: {
//是否是分享页面 由分享而来 不展示返回按钮
isShare: app.globalData.isShare,
// 状态栏高度
statusBarHeight: app.globalData.statusBarHeight + 'px',
// 导航栏高度
navigationBarHeight: app.globalData.navigationBarHeight + 'px',
// 胶囊按钮高度
menuButtonHeight: app.globalData.menuButtonHeight + 'px',
// 导航栏和状态栏高度
navigationBarAndStatusBarHeight: app.globalData.navigationBarAndStatusBarHeight + 'px'
},
/**
* 组件的方法列表
*/
methods: {
GoBack(e) {
if (!this.data.hasback) {
return;
}
let that = this;
let url = e.currentTarget.dataset.navigationurl;
//console.log(e)
if (e.currentTarget.dataset.navigationtype == "navigateTo") {
wx.navigateTo({
url: url,
})
}
if (e.currentTarget.dataset.navigationtype == "navigateBack") {
wx.navigateBack({
url: url,
})
}
if (e.currentTarget.dataset.navigationtype == "switchTab") {
wx.switchTab({
url: url,
})
}
}
}
})
View Code
json
{
"component": true,
"usingComponents": {}
}wxml
<!--navigationBar.wxml-->
<!--使用范例：： <navigationBar title="自定义导航栏" navigationtype="navigateTo" navigationurl="/pages/echarts/echarts"></navigationBar> -->
<!-- <view class="navigation-container" style="{{'height: ' + navigationBarAndStatusBarHeight}}"> -->
<view class="navigation-container" style='height:{{navigationBarAndStatusBarHeight}}; background-color:{{bgc}};'>
<!--空白来占位状态栏 style='margin-top:{{navTop}}px; z-index:999;' -->
<view style="{{'height: ' + statusBarHeight}}"></view>
<!--自定义导航栏-->
<view class="navigation-bar" style="{{'height:' + navigationBarHeight}}">
<view bindtap="GoBack" data-navigationtype="{{navigationtype}}" data-navigationurl="{{navigationurl}}" class="navigation-buttons" style="{{'height:' + menuButtonHeight}}">
<image wx:if="{{!isShare&&hasback&&isBlack}}" class="nav-img" src='/tabBarImg/reback.png' mode="widthFix"/>
<image wx:if="{{!isShare&&hasback&&!isBlack}}" class="nav-imgwhite" src='/tabBarImg/rebackwhite.png' mode="widthFix"/>
</view>
<view class="navigation-title" style='line-height:{{navigationBarHeight}}; color:{{color}};'>{{title}}</view>
</view>
</view>
<!--空白占位，填充定位造成的空间飘逸-->
<view style="{{'height: ' + navigationBarAndStatusBarHeight}}"></view>
css
/* navigationBar.wxss */
.navigation-container {
position: fixed;
width: 100%;
z-index: 9999999;
top: 0;
left: 0;
background-color: #a2e6e7;
}
.navigation-bar {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
}
.navigation-buttons {
display: flex;
align-items: center;
margin-left: 25px;
box-sizing: border-box;
background-color: transparent;
width: 68rpx;
}
.statusbarClas {
background: transparent;
color:black;
}
.nav-img {
width: 16rpx;
}
.nav-imgwhite {
width: 36rpx;
}
.navigation-title {
position: absolute;
left: 104px;
right: 104px;
text-align: center;
font-size: 30rpx;
color: #000000;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: 楷体;
}
View Code
@天才卧龙的博客
