根据后台数据标点

1 引言

小程序地图标点可以自己写死也可以根据后台数据自动标点，实现根据后台数据标点便于后期小程序的维护

2 问题

1、根据后台数据返回的经纬度，将标记点渲染到地图上

2、点击各个标记点，显示其一些详细信息

3 方法

思路比较简单，获取后台数据后用for循环遍历经纬度并将其放入markers中即可。这里我们用wx.request获取极速数据API的加油站数据。

wx.request的属性如下：

详情请进RequestTask | 微信开放文档 (qq.com)查看。

极速数据API：

详情请进加油站查询API接口_免费数据接口 - 极速数据 (jisuapi.com)查看。

index.wxml

<map
style="width:100%;height:500px"
markers="{{markers}}"
latitude="{{markers[0].latitude}}" longitude="{{markers[0].longitude}}"
></map>

var app=getApp();
Page({
 /**
  * 页面的初始数据
  */
 data: {
   markers:[],
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
var that=this;
 //获得后台数据，并显示标记  
   wx.request({
     url: 'https://api.jisuapi.com/oilstation/nearby?appkey=' + app.globalData.appkey,
     data:{//请求的参数
       lat:latitude,
       lng: longitude,
       distance:10000,
     },
     success:function(res){//请求成功之后执行的方法
       var result=res.data.result;
       console.log('结果是：',result)//在控制台打印出请求结果
       for(var i=0;i<result.length;i++){//用for循环将返回的经纬度放入markers中
let lat=result[i].lat; //取出每条数据中的参数
let lng=result[i].lng;
let name=result[i].name;
let address = result[i].address;
let tel = result[i].tel;
var index="markers["+(i)+"]";
that.setData({
[index]:{
latitude: lat,
longitude: lng,
iconPath: "../../image/site.png",//标记点的图标
width: 30,
height: 30,
callout: {
content: name+'\n'+address+'\n'+tel,//显示相关信息
color: 'red',
fontSize: 13,
borderRadius: 5,
borderWidth: 1,
borderColor: '#0000ff',
padding: 2,
display: 'BYCLICK'
}
},
})
}
}
})
},
})

app.js

//app.js
App({
 onLaunch: function () {
 },
 globalData: {
   userInfo: null,
   appkey:'8bfb05c835c756bc'//你申请的appkey
 }
})

使用wx.request需要在详情 ==> 本地设置 中打开【不校验合法域名、web-view（业务域名）、TLS版本以及HTTPS证书】

如图：

4 实验结果与讨论

最终结果如图：

控制台打印的后台数据：

5 结语

根据后台在地图上标点的重点是拿到数据后如何处理，这里我们用for循环将其放入markers中，总体上较为简单。下期将介绍如何计算自己位置与标记点之间的距离

实习编辑：李欣容