本文已参与「新人创作礼」活动，一起开启掘金创作之路。
一 效果图
二 代码
mapDemo.js 代码
// pages/demoMap/mapDemo.js
Page({
/**
* 页面的初始数据
*/
data: {
markers: [
//貘科动物馆
{
id: 0,
iconPath: "../image/my_2.png",
latitude: 39.941386,
longitude: 116.336655,
width: 30, //图片显示宽度
height: 30,//图片显示高度
title:'貘科动物馆',
label:{
content:'我是标签展示数据',
color:'#EEC40A',
fontSize:15,
borderColor:'#D2D6DF',
textAlign:'center',
width: 150,
height: 30,
borderWidth: 1,
borderRadius: 10,
bgColor: '#ffffff'
},
callout:{
content:'我是点击之后的气泡',
color:'#D2D6DF',
fontSize:13,
borderColor:'#242424',
textAlign:'center',
width: 150,
height: 40,
borderWidth: 1,
borderRadius: 10,
bgColor: '#ffffff'
},
},
//犀鸟馆
{
id: 1,
iconPath: "../image/my_2.png",
latitude: 39.940826,
longitude: 116.335109,
width: 30,
height: 30,
title:'犀鸟馆',
label:{
content:'我是标签-犀鸟馆',
color:'#D2D6DF',
fontSize:12,
borderColor:'#242424',
textAlign:'center',
width: 200,
height: 30,
borderWidth: 1,
borderRadius: 10,
bgColor: '#ffffff'
}
},
//火烈鸟馆
{
id: 2,
iconPath: "../image/my_2.png",
latitude: 39.940578,
longitude: 116.335977,
width: 30,
height: 30,
title: '火烈鸟馆'
},
//鹦鹉馆
{
id: 3,
iconPath: "../image/my_2.png",
latitude: 39.941573,
longitude: 116.335544,
width: 30,
height: 30,
title: '鹦鹉馆',
callout:{
content:'我是点击之后的气泡——鹦鹉馆',
color:'#D2D6DF',
fontSize:13,
borderColor:'#242424',
textAlign:'center',
width: 280,
height: 40,
borderWidth: 1,
borderRadius: 10,
bgColor: '#ffffff'
},
}],
setting:{},
test:'testaaaa'
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.setData({
// 仅设置的属性会生效，其它的不受影响
setting: {
enable3D: false,
enableTraffic: false
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
console.log(this.data.test,"test",this.data.markers)
this.setData({
markers:this.data.markers
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
mapDemo.json
{
"navigationStyle":"default",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "地图",
"navigationBarTextStyle": "black",
"disableScroll": true,
"usingComponents": {}
}
mapDemo.wxml
<view class="mymap">
<map
style="height: 500rpx; width:100%;"
id="maptest"
longitude="116.336590"
markers="{{markers}}"
latitude="39.941127">
</map>
<!-- <view class="mytest">我是地图</view> -->
<view class="mybox">
<view class="my-header">
<view class="my-header-left">海珠区</view>
<view class="my-header-right">共99个网点</view>
</view>
<block wx:for="(item,index) in 10" wx:key="index">
<view class="my-item">
<view class="my-item-title">
<view class="my-item-state">营业中</view>
<view class="my-item-title-value">南州小聪科技创意自助洗车站</view>
</view>
<view class="my-item-detail">
<view class="my-item-left">
<view class="my-item-left-top">
<view class="my-item-left-num">4台设备</view>
<view class="my-item-left-other">
<view class="tag">清洁</view>
<view class="tag">泡沫</view>
<view class="tag">吸尘</view>
<view class="tag">消毒</view>
<view class="tag">保养</view>
<view class="tag">吸尘</view>
<view class="tag">消毒</view>
<view class="tag">保养</view>
</view>
</view>
<view class="my-item-left-address">
<view class="my-item-left-address-icon"><icon color="#2C7BFF" type="warn" size="18"></icon> </view>
<view class="my-item-left-address-value">南州小聪科技创意自助洗车站</view>
</view>
</view>
<view class="my-item-right">
<view class="my-item-btn">
<view class="my-item-btn-left"><text class="my-item-btn-left-num">2.5</text>KM</view>
<view class="my-item-btn-right"><icon class="icon-box-img" type="search" size="18"></icon></view>
</view>
</view>
</view>
</view>
</block>
</view>
</view>
mapDemo.wxss
.mymap {
padding: 10rpx 0;
height: 100%;
}
.mytest{
height: 500rpx; width:100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 60rpx;
background: #DACBCB;
}
.mybox{
border: 2rpx solid #F5F5F5;
margin-top: 30rpx;
border-top-left-radius: 50rpx;
border-top-right-radius: 50rpx;
}
/* 城市选择注释 */
.my-header{
height: 80rpx;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx ;
border-bottom:1rpx solid #EBEBEB;
}
.my-header-left{
font-size: 32rpx;
font-weight: bold;
flex: 1;
text-align: left;
}
.my-header-right{
font-size: 30rpx;
font-weight: bold;
flex: 1;
text-align: right;
}
/* 网点列表样式 */
.my-item{
padding: 20rpx;
border-bottom:1rpx solid #EBEBEB;
}
.my-item-title{
font-size: 30rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.my-item-state{
width: 120rpx;
box-sizing: border-box;
background: #2072F8;
color: #ffffff;
text-align: center;
border-radius: 10rpx;
}
.my-item-title-value{
flex: 1;
font-weight: bold;
padding-left: 15rpx;
}
.my-item-detail{
margin: 20rpx 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.my-item-left{
padding-right: 15rpx;
}
.my-item-left-top{
display: flex;
flex: 1;
justify-content: space-between;
align-items: center;
}
.my-item-left-num{
width: 130rpx;
border: 1rpx solid #DADADA;
text-align: center;
border-radius: 20rpx;
font-size: 26rpx;
padding: 5rpx ;
align-self: flex-start;
}
.my-item-left-other{
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
}
.tag{
font-size: 24rpx;
text-align: center;
margin: 5rpx;
border-radius: 20rpx;
padding: 5rpx 10rpx;
background: #DFEBFF;
color: #4E8BED;
}
.my-item-left-address{
margin-top: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.my-item-left-address-icon{
width: 50rpx;
text-align: center;
}
.my-item-left-address-value{
flex: 1;
font-size: 24rpx;
font-weight: 400;
}
.my-item-right{
width: 200rpx;
}
.my-item-btn{
border: 2rpx solid #2C7BFF;
text-align: center;
display: flex;
justify-content: space-between;
align-items: center;
padding: 8rpx 10rpx;
border-radius: 25rpx;
background: #E7F0FF;
}
.my-item-btn-left{
flex: 7;
font-size: 24rpx;
color: #2C7BFF;
}
.my-item-btn-left-num{
font-size: 30rpx;
}
.my-item-btn-right{
flex:3;
}
取消禁止滑动样式
在app.wxss中设置
page {
/* 取消原生禁止滑动 */
overflow-y: auto !important;
}
