本文将带你了解微信小程序开发之-简单出售商品示例，希望本文对大家学微信有所帮助。

首先打开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
   
   <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%;">
   
       
   
   
       
   
       发布
       搜索
   
 5首先布局下方”发布”,”搜索”部分,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
   })
    }
    })
      },
    })
   
   
        

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道！