微信小程序大热,在小程序过程中,我们很多时候都会用到地图。不管是企业的地址,还是商家的配送都会用到地图;
我在刚写地图这一块时,在网上也参考了很多网友的方法,始终有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; }
有不妥的地方,请指出!
未经作者同意,不得转载或者复制!