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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44

然后我们给地图打点,添加定位图标,以及可以回到原点的控件,需要再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
   })
}
})
  },
})