微信小程序引入腾讯地图API方法

微信小程序大热，在小程序过程中，我们很多时候都会用到地图。不管是企业的地址，还是商家的配送都会用到地图；

我在刚写地图这一块时，在网上也参考了很多网友的方法，始终有Bug（类似于地图拖拽是画面抖动，无法点击跳转到导航页面等等）

下面的代码是后台动态添加坐标（经度纬度的方法）

我这里有这么一个方法，希望对你有用：

wxml：

<map bindtap="toMap" showLocation  latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" scale="14">
</map>

js:

var requetNet = require('../../common/js/request.js');
var app = getApp()

Page({
  data: {
    companyMessage: [],
    latitude: 0,
    longitude: 0,
    markers: [{
      iconPath: "../../images/consult/ic_position.png",
      latitude: 0,
      longitude: 0,
      width: 17,
      height: 35
    }],
    form_info:[]
  },
  onLoad: function(t) {
    var that = this;
    requetNet.send({
      url: '/enterprise/info/getRelationInfo.json',
      opt: {
        loading: true
      },
      success: function(res) {
        var companyMessage = res.data;
        that.setData({
          companyMessage: companyMessage,
          latitude: res.data.addressLatitude,
          longitude: res.data.addressLongitude,
        });
        var markers = that.data.markers;
        markers[0].latitude = res.data.addressLatitude;
        markers[0].longitude = res.data.addressLongitude;
        that.setData({
          markers: markers
        });
      }
    });
  },
  toMap: function() {
    var companyMessage = this.data.companyMessage;
    wx.openLocation({
      latitude: Number(companyMessage.addressLatitude),
      longitude: Number(companyMessage.addressLongitude),
      name: companyMessage.addressInfo,
      scale: 15
    });
  }
})

request.js

var app;

function requestNet(par) {
  if (!app)
    app = getApp();
  wx.getStorage({
    key: 'openId',
    success: function(res) {
      var openId = "";
      if (res.data && res.data.openId)
        openId = res.data.openId;
      startReq(par, openId);
    },
    fail: function() {
      startReq(par, "");
    }
  });
}

function startReq(par, openId) {
  var data = par.data || {};
  try {
    data.openId = openId;
  } catch (e) {}
  var opt = par.opt;
  if (opt && opt.loading === true) {
    wx.showLoading({
      title: '加载中',
      mask: true
    });
  }
  wx.request({
    url: app.globalData.url + par.url,
    data: data,
    header: {
      'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
      // 'applicationType': app.globalData.applicationType || ""
    },
    method: 'POST',
    success: function(res) {
      wx.hideLoading();
      if (res.statusCode != 200) {
        wx.showToast({
          title: "网络连接失败",
          icon: 'none',
          duration: 2000
        });
        return;
      }
      res = res.data;

      var success = par.success;
      var code = res.code;
      if (opt && opt.mustOK === false) {
        success && success(res);
        return;
      }
      if (code == 200) {
        success && success(res);
        return;
      }
      wx.showToast({
        title: res.msg || "提示",
        icon: 'none',
        duration: 2000
      });
    },
    fail: function() {
      wx.hideLoading();
      var fail = par.fail;
      if (fail) {
        fail && fail();
      } else {
        wx.showToast({
          title: "网络连接错误,请检查网络",
          icon: 'none',
          duration: 2000
        });
      }
    },
    complete: function() {

    }
  });
}
module.exports = {
  send: requestNet
}

wxss

#map {
  width: 100%;
  height: 350rpx;
}

有不妥的地方，请指出！

未经作者同意，不得转载或者复制！