利用api向小程序地图中添加marker

算法与编程之美

发布于 2022-05-23 14:58:31

9950

发布于 2022-05-23 14:58:31

文章被收录于专栏：算法与编程之美算法与编程之美

问题

在某些小程序中我们需要将一些地点的位置标记出来。之前我们也发过有关marker添加的文章，今天在此技术的基础上利用api向其中填加maker。

方法

获取api中的数据找到其结构和要添加的marker的路径。例子中获取的格式是这样的：

可以看到在结果中的第二个data就是我们所需要导入的数据集了。所以我们就是res/result.data.data

因为要将许多的数据导入所以需要用到循环。然后按我们需要的结构进行赋值。明显我们要得到上面结果的长度同时需要一个局部变量去指代正在进行赋值的数据for (var i = 0; i < result.data.data.length; i++){“在这之中加入赋值语句就好”}，在进行id的赋值时要注意一定要是Number的，开发文档中也有提到。

最后我们可以得到如下效果

代码清单 1


//加载
onLoad:function(e){
 //添加markers
    let that = this
    wx.request({
      url: 'url',//api地址
      data: {
        id:'',
        latitude:"",
        longitude:"",
        content:"",
        name:"",
        poiType:"",
      },
      header: {'content-type':'application/json'},//默认
      method: 'POST',//匹配api的方法 是存在POST和get两种
      dataType:'json',
      responseType: 'text',
      success: (result) => {
        // console.log(result.data.data);
          for (var i = 0; i < result.data.data.length; i++) {
            // console.log(result.data.data[i]);一定要把路径找对！！
            let mark = "markers[" + i + "]";
            let id = "markers[" + i + "].id";
            let iconPath = "/image/zoo.png"//需要的图标
            let latitude = "markers[" + i + "].latitude";
            let longitude = "markers[" + i + "].longitude";
            let poiType = "markers[" + i + "].poiType";
            let name = "markers[" + i + "].name"
            that.setData({
              [mark]:
              {
                id: Number(result.data.data[i].id),//小程序开发文档里说过id必须是Number，在这里转换一下。
                iconPath: "/image/zoo.png", 
                latitude: result.data.data[i].latitude, 
                longitude: result.data.data[i].longitude, 
                width: 50,
                height: 50,
                name:result.data.data[i].name,
                poiType:result.data.data[i].poiType,
                label:{
                  content:result.data.data[i].name,
                  fontsize:15,
                  borderRadius:10,
                  bgColor:'#fff',
                  anchorX:-35,
                  anchorY:3,
                  padding:5
                }//固定的数据就写死
              }
            }
            )}
        },
  })
  }

结语

当我们进行一个小程序的后期维护的时候，可能会涉及到一写可移动建筑的情况，利用这种可以减少我们后期的工作量。

稿件来源：深度学习与文旅应用实验室（DLETA）

作者：赵金莘

主编：欧洋

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2022-04-12，如有侵权请联系 cloudcommunity@tencent.com 删除

api