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

Posted 算法与编程之美

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了利用api向小程序地图中添加marker相关的知识,希望对你有一定的参考价值。

问题

在某些小程序中我们需要将一些地点的位置标记出来。之前我们也发过有关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) 


作者:赵金莘

主编:欧洋

与50位技术专家面对面 20年技术见证,附赠技术全景图

以上是关于利用api向小程序地图中添加marker的主要内容,如果未能解决你的问题,请参考以下文章

在高德地图上添加自定义Marker

android 百度地图上marker点移动要怎么处理

百度地图API详解之地图标注

android 百度地图如何实现点击地图添加marker,每点击一次添加一个标注并且之前的标注不消失,如何实现?

微信小程序地图实现多个位置标记marker

微信小程序 地图多个markers怎么赋值