根据后台数据，渲染多个坐标在小程序中

1、根据后台数据，返回的经纬度，渲染到地图上

2、点击各个坐标点，显示公司一些详细信息

3、如下图所示，这个接口目前是有效的，如果无效的话，可以自己写一个json文件自测一些哈

 

 以下是自己写的一个demo，以供参考；详细的可以看看微信小程序的文档，弄懂了就好，知识万变不离其宗，努力吧

 

wxml文件

 1 <map 
 2   id="map" 
 3   longitude="{{longitude}}" 
 4   latitude="{{latitude}}" 
 5   scale="5" 
 6   controls="{{controls}}" 
 7   bindcontroltap="controltap" 
 8   markers="{{markers}}" 
 9   polyline="{{polyline}}" 
10   bindregionchange="regionchange" 
11   show-location 
12   style="width: 100%; height: 100%;">
13 </map>

wxss文件

map{
  height: 100%;
}
page{
  height: 100%;
}

　js文件

// 地图标记点
var markers = []
// 地图标记点的气泡
var callout = []

Page({

  /**
   * 页面的初始数据
   */
  data: {
    marker_latitude: '',
    marker_longitude: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    wx.request({
      url: 'http://101.200.182.221:8001/Api/Services/GetAllServiceFacilitatorMap',
      data: {},
      method: 'POST',
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: (res) => {
        // console.log(res.data.Data)
        that.setData({
          listData: res.data.Data
        })

        var listData = res.data.Data
        for (var i = 0; i < listData.length; i++) {
          markers = markers.concat({
            iconPath: "../../image/location.png",
            id: listData[i].FacilitatorId,
            callout: {
              content: listData[i].Contact + '\n' + listData[i].FacilitatorName + '\n' + listData[i].Address,
              fontSize: '16',
              padding: true,
              color: '#444',
              display: 'BYCLICK',
              textAlign: 'center',
              borderRadius: 15
            },
            latitude: listData[i].Latitude,
            longitude: listData[i].Longitude,
            width: 20,
            height: 20
          })
        }
        // console.log(markers)
        that.setData({
          markers: markers,
          latitude: listData[0].Latitude,
          longitude: listData[0].Longitude
        })

        wx.getLocation({
          type: 'wgs84',
          success: (res) => {
            var latitude = res.latitude
            var longitude = res.longitude
          },
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  regionchange(e) {
    console.log(e.type)
  },
  // markertap(e){
  //   var that = this
  //   console.log(e.markerId)
  //   for(var i=0;i<this.data.listData.length;i++){
  //     if(e.markerId == this.data.listData[i].id){
  //       this.setData({
  //         marker_latitude:this.data.listData[i].Latitude,
  //         marker_longitude:this.data.listData[i].Longitude,
  //         title: this.data.listData[i].FacilitatorName
  //       })
  //     }
  //   }

  //   wx.openLocation({
  //     latitude: Number(that.data.marker_latitude),
  //     longitude:Number(that.data.marker_longitude),
  //     name:that.data.title,
  //     scale:6
  //   })
  // },

  controltap(e) {
    console.log(e.controlId)
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

 

posted @ 2019-03-11 15:56  静水思流  阅读(1043)  评论(1)  编辑  收藏  举报