小程序map显示marker标记点

Posted 2020-12-08 pycmsj

<!--index.wxml-->
<map markers="{{markers}}" show-location></map>

// pages/chooseCart/chooseCart.js
const API = require(‘../request/api.js‘)
const UI = require(‘../../utils/common.js‘)
onLoad: function (options) {
    var that = this;
    that.getCartList();
},
getCartList(){
    var that = this;
    var params = {};
    //请求后端接口获取数据，把参数一次赋值进去(这里我封装了wx.request)
    API.vehicleStatus(params).then(res => {
        console.log(res);
        res.forEach((item,index) => {
          item[‘id‘]     = index + 1;
          item[‘width‘]  = ‘20px‘;
          item[‘height‘] = ‘20px‘;
          item[‘latitude‘] = item.wd;
          item[‘longitude‘] = item.jd;
          item[‘iconPath‘] = ‘/images/hint.png‘;
          item[‘callout‘] = {};
          item[‘callout‘][‘content‘] = item.pos.length > 10 ? item.pos.substring(0,18) + ‘
‘ + item.pos.substring(18,item.pos.length) : item.pos;
          item[‘callout‘][‘bgColor‘] = ‘#fff‘;
          item[‘callout‘][‘padding‘] = ‘5px‘;
          item[‘callout‘][‘borderRadius‘] = ‘2px‘;
          item[‘callout‘][‘borderWidth‘] = ‘1px‘;
          item[‘callout‘][‘borderColor‘] = ‘#fff‘;
        })
        that.setData({
          markers:res,
        })
      })
 },

//common.js
var toast = function toast(title){
  wx.showToast({
    icon:‘none‘,
    title: title,
    duration:2000,
  })
}
var loading = function toast(title) {
  wx.showLoading({
    title: title,
  })
}
module.exports.toast = toast;
module.exports.loading = loading;

//api.js
var request = require(‘./http.js‘);
var api = {
  vehicleStatus: data => { return request(‘vehicleStatus‘, data) },
}
module.exports = api //导出所有请求接口

//http.js
var host = ‘https://www.xxx.com/api/xcx/‘;//请求地址
module.exports = function (url, data, method) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: `${host}/${url}`,
      data: data,
      method: method || ‘GET‘,
      header: {
        ‘Content-Type‘: ‘application/x-www-form-urlencoded;charset=utf-8‘,
      },
      success: function (res) {
        resolve(res.data);
      },
      complete:function(){
        wx.hideLoading();
      },
      fail: reject,
    })
  })
}