微信小程序大热，在小程序过程中，我们很多时候都会用到地图。不管是企业的地址，还是商家的配送都会用到地图；
我在刚写地图这一块时，在网上也参考了很多网友的方法，始终有Bug（类似于地图拖拽是画面抖动，无法点击跳转到导航页面等等）
下面的代码是后台动态添加坐标（经度纬度的方法）
我这里有这么一个方法，希望对你有用：
wxml：
<map bindtap="toMap" showLocation id="map" 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;
}
有不妥的地方，请指出！
未经作者同意，不得转载或者复制！