根据后台数据标点
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)
相关文章
- 阿里云数据库NL2SQL技术获国际权威评测第一名
- 亚马逊云科技:用云原生数据库赋能传统行业创新
- 云计算的缺点,你知道吗?
- 推动边缘计算增长的四个因素
- 网络原来如此之网络服务质量QoS技术
- 2022杭州云栖大会定档11月3日:70+论坛和4万平科技展 即日起免费预约
- 如何使用边缘计算提高可持续性?
- 专家视点:如何战胜边缘计算挑战?
- 边缘计算优势有哪些
- 数据上云的一些槽点,你Get到了吗?
- 多机房该如何部署?数据如何同步?
- 从大厂挖来的架构师,Kafka参数调优做的那叫一个优雅,学到了
- Kafka为何要设计缓冲池机制?初看一脸懵逼,看懂直接跪下
- 工业领域的四个边缘计算用例
- 图解 Kafka 源码实现机制之客户端缓存架构
- 边缘计算与物联网的未来
- 为什么边缘计算和人工智能策略必须互补
- 有了 IP 地址,为什么还要用 MAC 地址?
- 云无关硬件如何成为物联网的未来
- 为什么构建一个外部数据产品这么难?