【小程序】小程序如何动态设置marker？

Z时代
2024-01-10
分类：技术分享

小程序如何动态设置marker？
在使用map组件的时候遇到问题，先上代码
Page({
data: {

getbranchListRequest: {
center: "",
city: "3",
gearBox: "AUTO",
priceEnd: "500",
priceStart: "0",
rentType: "0",
vehType: "ECON"
},
map: {
markers: [],
longitude: 0,
latitude: 0,
scale: 17,
hasMarkers:false}

bindcontroltap: function (e) {

switch (e.controlId) {
//跳转个人中心
case 1:
wx.navigateTo({
url: '../personal/personal',
})
break;
//定位到当前位置
case 2:
wx.createMapContext("map", this).moveToLocation();
this.setData({
'map.scale': 12
})
break;}

findCar: function () {

wx.navigateTo({
url: '../usecar/usecar',})

},
/**

生命周期函数--监听页面加载

*/
onLoad: function (options) {

this.timer = options.timer;
var that = this;
wx.getLocation({
type: "gcj02", // 坐标系类型
success: (res) => {
that.setData({
'map.longitude': res.longitude,
'map.latitude': res.latitude,
'getbranchListRequest.center': res.longitude + "," + res.latitude
})
this.initmarker();},

},
initmarker: function () {

let that = this;
let url = app.globalData.api.GET_BRANCH_LIST
let getbranchListRequest = JSON.stringify(that.data.getbranchListRequest)
http.http(url, getbranchListRequest,
function success(res) {
console.log(res);
let a = []
a = res.data.data
let i
for(i=0;i<=res.data.data.length;i++){
that.setData({
'map.markers': [{
id: a[i].branchId,
latitude: a[i].lat,
longitude: a[i].lng,
iconPath: "/images/ic_point.png",
width: 40,
height: 50
}],
'map.hasMarkers': true
})
}
console.log(that.data.map.markers)
}, function fail(res) {
console.log(res);})