首先打开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 > </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