首先打开app.json修改如下
{
"pages":[
"pages/index/index",
"pages/search/search",
"pages/publish/publish"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#03bbd5",
"navigationBarTitleText": "标题",
"navigationBarTextStyle":"white",
"enablePullDownRefresh":true,
"backgroundColor":"#ccc"
}
}
布局第一个界面,如图所示
代码如下,index.wxml
<view>
<view class="mapArea">
<map
id="map"
longitude="{{longitude}}"
latitude="{{latitude}}"
scale="10"
controls="{{controls}}"
bindcontroltap="handleControlTap"
markers="{{markers}}"
bindmarkertap="markertap"
polyline="{{polyline}}"
bindregionchange="regionchange"
show-location
style="width: 100%; height: 100%;">
</map>
</view>
<!-- <button bindtap="bindViewTap">tap</button> -->
<view class="nav">
<view class="publish"><navigator url="../publish/publish">发布</navigator></view>
<view class="search">搜索</view>
</view>
</view>
首先布局下方”发布”,”搜索”部分,index.wxss文件如下
.nav
{
height: 42px;
width: 100%;
position: absolute;
/* top: 100%; */
bottom: 0px;
display: flex;
color: #fff;
}
.mapArea{
/* height: 500px; */
bottom: 42px;
width: 100%;
top: 0px;
left: 0px;
right: 0px;
position: absolute;
/* background-color: black; */
}
.publish,.search{
text-align: center;
line-height: 42px;
height: 42px;
flex: 1; /*占用1/2,当改成2时,则占用2/3*/
}
/* 以下的内容可以整合到上方.publish,.search{}中 */
.publish
{
background-color: #ff9700;
/* width: 50%; */
/* float: left; 当下方方块多了的时候就不好用了*/
}
.search
{
text-align: center;
line-height: 42px;
/* width: 50%; */
background-color: #03bbd5;
height: 42px;
/* float: right; */
flex: 1;
}
然后我们给地图打点,添加定位图标,以及可以回到原点的控件,需要再index.js中
打点是采用ajax向后端获取数据,然后循环写入markers数组中,
定位图标,回到原点的控件这个需要获取屏幕的高度和宽度
Page({
onReady:function(){
this.mapContext = wx.createMapContext('map')
},
data: {
markers: [],
latitude:'',
longitude:'',
controls: [{
id: 1,
iconPath: 'center.png',
position: {
left: 10,
top: wx.getSystemInfoSync().windowHeight-100,
width: 30,
height: 30
},
clickable: true
},
{
id: 2,
iconPath: 'pin.png',
position: {
left: wx.getSystemInfoSync().windowWidth/2-10,
top: (wx.getSystemInfoSync().windowHeight-42)/2 - 30,
width: 22,
height: 31
},
clickable: true
}
]
},
handleControlTap: function (e) {
console.log(e.controlId)
if (e.controlId ==1) {
this.mapContext.moveToLocation()
}
},
onLoad: function() {
var that = this;
wx.getLocation({
type:'gcj02',
success:function(res){
that.setData({
longitude:res.longitude,
latitude:res.latitude
})
}
})
var obj = null
var markerss = [];
wx.request({
url: 'https://felixlu.duapp.com/index.php/trade/get_list', //仅为示例,并非真实的接口地址
method:'GET',
header: {
'content-type': 'application/x-www-form-urlencoded' //告诉提交给后台的文件类型
},
success: function(res) {
for (var i =0;i<res.data.data.length;i++){
if(res.data.data[i].type == 'buy'){
obj = {
iconPath: "buy.png",
id: res.data.data[i].id,
latitude:res.data.data[i].latitude,
longitude:res.data.data[i].longitude,
width: 20,
height: 20
}
markerss.push(obj)
}else{
obj = {
iconPath: "test1.png",
id: res.data.data[i].id,
latitude:res.data.data[i].latitude,
longitude:res.data.data[i].longitude,
width: 20,
height: 20
}
markerss.push(obj)
}
}
that.setData({
markers:markerss
})
}
})
},
})
第二个界面,如图
我们新建publish文件夹
<view class="wrap">
<view class="form-area">
<view class="label">我的地址</view>
<view class="text" bindtap="handleChooseTap">{{addr}}</view>
</view>
<view class="form-area">
<view class="label">类型</view>
<view class="text">
<radio-group bindchange="handleChangeType" class="radio-group" >
<label class="radio">
<!-- 点击后获取e.detail.value值buy -->
<radio value="buy" />求购
</label>
<label class="radio">
<radio value="sell"/>转让
</label>
</radio-group>
</view>
</view>
<view class="form-area">
<view class="label">说明</view>
<view class="text">
<input bindinput="handleInputMessage" placeholder="请输入说明" />
</view>
</view>
<view class="form-area">
<view class="label">联系方式</view>
<view class="text">
<view class="text">
<input bindinput="handleInputContact"placeholder="请输入联系方式" />
</view>
</view>
</view>
<view class="button">
<button class="btn" type="primary"
bindtap="handleInputSubmit"> 发布信息 </button>
</view>
</view>
publish.wxss
.form-area{
height: 100rpx;
width: 100%;
border-bottom: 1px #ccc solid;/*如果是border则是双线,上下两个边框*/
display: flex;
font-size: 18px;
color: #666;
background-color: #FAF5F5;
}
.label,.text{
line-height: 100rpx;
}
.label{
padding-left: 10px;
width: 100px;
}
.text{
flex: 1;
}
input
{ /* width: 300px;
margin: 10px; */
/* background: #ff9700; */
/* text-align: center;
line-height: 46px; */
margin-top: 11px;
}
.btn{
margin: 10px;
text-align: center;
line-height: 46px;
color: ;
font-size: ;
}
这个界面有几个关键操作,
1.利用微信给的组件选择位置后,第一行需要显示出来
2.发布商品后,需要再地图上打点
publish.js代码如下
// pages/publish/publish.js
Page({
data: {
addr:'点击选择,要勾选哦'
},
staticData:{
type:'',
message:'',
contact:'',
latitude:'',
longitude:''
},
handleChooseTap: function(){
var that = this;
wx.chooseLocation({
success: function(res){
// console.log(that.data.address);返回点击选择,要勾选哦
that.setData({
addr: res.address //替换addr
})
that.staticData.latitude = res.latitude;
that.staticData.longitude = res.longitude;
}
})
},
handleChangeType: function(e){
// console.log(e)
this.staticData.type = e.detail.value
},
handleInputMessage: function(e){
// console.log(e)
this.staticData.message = e.detail.value
},
handleInputContact:function(e){
this.staticData.contact = e.detail.value
},
// 绑定按钮
handleInputSubmit: function(){
//这就是ajax
// console.log(0)
wx.request({
url: 'https://felixlu.duapp.com/index.php/trade/add_item', //仅为示例,并非真实的接口地址
method:'POST',
data: {
address: this.data.addr,
latitude:this.staticData.latitude,
longitude: this.staticData.longitude,
message: this.staticData.message,
contact: this.staticData.contact,
type: this.staticData.type
},
header: {
'content-type': 'application/x-www-form-urlencoded' //告诉提交给后台的文件类型
},
success: function(res) {
// console.log(res.data)
if (res.data.ret) {
// console.log('success');
wx.showToast({
title: '发布成功',
icon: 'success',
duration: 2000
})
}else{
condole.log('fail');
}
}
})
wx.navigateTo({
url: '../index/index'
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
搜索界面
此部分尚未完成