小程序模板网

微信小程序-简单出售商品示例

首先打开app.json修改如下{ "pages":, "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#03bbd5", "navigationBarTitleText": "标题", "navigationBarTextStyle&q

 
 
 

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


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18276.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询