zl程序教程

您现在的位置是:首页 >  数据库

当前栏目

根据后台数据标点

2023-04-18 16:05:26 时间

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

实习编辑:李欣容

稿件来源:深度学习与文旅应用实验室(DLETA)