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中，总体上较为简单。下期将介绍如何计算自己位置与标记点之间的距离
