山东大学创新实训周报（9）----与后端数据的对接

一.前情提要

前端的一切逻辑与界面都已经准备完毕，只需要获取景点的讲解音频，然后替换为要播放的音频即可。

二.与后端的对接

接口以景点名称作为查询的参数，使用wx.request发送请求，并将返回值填入事先定义好的变量中去。

wx.request({
      url: 'https://www.aiguideotDetails', //已处理
      data: {
        name:event.detail.name
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success (res) {
        console.log(res.data)
        // 填入数据
        if(res.data["error"]!=null){
          _this.setData({
            "popup.title":"603",
            "popup.description":"洞天福地",
          })
        }else{
          _this.setData({
            "popup.title":event.detail.name,
            "popup.latitude":event.detail.latitude,
            "popup.longitude":event.detail.longitude,
            "popup.description":res.data["description"],
            "popup.src":res.data["imageUrls"][0],
          })
        }
        
      },
      
    })

三.问题记录与解决

由于最初与后端景点匹配使用的参数是经纬度而引发了一系列问题，希望后续的开发这可以避开：

我们的逻辑是点击地图获取经纬度，然后发送查询请求，找到在一定范围内匹配的景点，但是问题就出现在点击地图，地图返回的经纬度偏移巨大，原因是返回的经纬度会受缩放比例影响，下面举例说明：

当地图缩放比例大时，点击李清照纪念堂，获取的经纬度为117.01667882832623 36.661466913393426。

比例小时，继续点击，返回117.01492153685172 36.66151641562399，小数点后第三位便已不同，影响后端匹配，经排查，发现返回的经纬度会受缩放比例影响，点击时返回的是点击到的地图的位置，但是如上图所示，缩放比例小时，李清照纪念堂最左边的“李”字的位置已经到达整个景区的边缘，所以点击“李”字时返回的是“李”字所在的经纬度，不是景点所在的经纬度，这一点我认为是腾讯地图接口不好用的一部分，所以我们将匹配参数改为景点名称。