小程序地图插入图标后 怎么实现点击图标弹出窗口

简介: 小程序地图插入图标后 怎么实现点击图标弹出窗口


1
问题描述

本次博客的要解决的问题是:小程序地图插入图标后 怎么实现点击图标弹出窗口

如图:






2算法描述点击标记点获取数据

  想要在地图等页面上显示弹窗,是使用的是marke的方法,点击标记点获取数据

先在wxml里写好布局文件

<view  class="detail-card-body1hoverClass="hover"   

     bindtap="toCase1"  data-id="{{ingma.id}}">

        <view class="detail-card-title1"  >{{ingma.name}}view>

        <view class="detail-card-distance" >

      距你{{dis}}

        view>

          <view class="detail-card-distance ">

                <view class="detail-card-audio-second ">

                  点击查看详情

                view>

          view>

        <view class="detail-card-des1">{{detailCardInfo.cardDesc}}view>

    view>



点击事件用bindtap,toCase1是需要在.js文件里写出的点击事件方法;bindtap="toCase1"是布局文件中删除按钮与.js文件里的删除方法绑定。下面看下.js里面跳转方法,弹窗是在点击图标时候弹出的,所以写在点击事件里面


Page({

    data:{

        latitude: 32.739668,//默认定位纬度

        longitude: 103.834568,

        showDialog:false,

        mapId:"myMap",//wxml中的map的Id值

        flag:true,

        currentItemId:0,

        isSelectedBuildType: 0,

        islocation: true,

        ingma:[],

        poiT:[

          { 

            name:'游览点',

            fid:'1',

            scale:'15',

            latitude: "32.739668",   

            longitude: "103.834568", 

            markers:[]

          } ,{ 

          name:'科普点',

          fid:'2',

          scale:'14.5',

            latitude: "32.722861",   

            longitude: "103.832321", 

          markers:[]

        },{ 

          name:'售票处',

          fid:'3',

          scale:'15.9',

          latitude: "32.748993",   

          longitude: "103.822896", 

          markers:[]

       },{ 

        name: '卫生间',

        fid:'4',

        scale:'16',

        latitude: "32.742095",   

        longitude: "103.834076", 

        markers:[]

       }

        ],


    onReady: function (e) {

      // 使用 wx.createMapContext 获取 map 上下文 

      this.mapCtx = wx.createMapContext('myMap')

    },


    onLoad: function() { 

        var that = this; 

       //  获取当前定位的经纬度信息

       wx.showLoading({

         title:"定位中",

         mask:true

       })

       wx.getLocation({

         type: 'gcj02', //返回可以用于wx.openLocation的经纬度

         altitude:true,//高精度定位

         //定位成功,更新定位结果

         success: function (res) {

           var latitude = res.latitude;

           var longitude = res.longitude;

           that.setData({

              centerX: longitude,

              centerY: latitude,

           });

         },

         //定位失败回调

         fail:function(){

           wx.showToast({               

             title:"定位失败",

             icon:"none"

           })

         },

         complete:function(){

           //隐藏定位中信息进度

           wx.hideLoading()

         }

       })

       }, 


 //点击其他位置关闭弹窗

  close(){

    this.setData({

      flag:true,

      locat:false,

    })

  },

//加载

onLoad:function(e){

    //添加markers

    var that = this

    wx.request({

      url: 'http://36.133.200.169:8088/public/spg/poi/list',

      data: {

      },

      header: {'content-type':'application/json'},

      method: 'POST',

      dataType:'json',

      responseType: 'text',

      success: (result) => {

          for (var i = 0; i < result.data.data.length; i++{

            var poiType = result.data.data[i].poiType

            if ( poiType == '游览点'){

            let mark = "poiT[0].markers[" + i + "]";

            that.setData({

              [mark]:

              {

                id: i, 

                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

                }

              },

            }

            )} else if ( poiType == '科普点'){

              let mark = "poiT[1].markers[" + i + "]";

                that.setData({

                [mark]:

                {

                  id: i, 

                  iconPath: "/image/kepu.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

                  }

                },

              }

              )} else if ( poiType == '售票处'){

              let mark = "poiT[2].markers[" + i + "]";

              that.setData({

                [mark]:

                {

                  id: i, 

                  iconPath: "/image/yld.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

                  }

                },

              }

              )} else{

                let mark = "poiT[3].markers[" + i + "]";

                that.setData({

                  [mark]:

                  {

                    id: i, 

                    iconPath: "/image/cs.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

                    }

                  },

                }

                )} 

          }

        },

       

  })

  },


  //点击标记点获取数据

   markertap(res){

    let self = this

    console.log(res)

    var mark=res.currentTarget.dataset;

    console.log(mark)

    var len = Object.keys(mark).length//获取JSON长度;

    var markerId=res.markerId;

    console.log(markerId)

    var currentItemId= this.data.currentItemId

    console.log(currentItemId)

    var result = this.data.poiT[currentItemId].markers;

    console.log(result)

    var id=markerId

      wx.getLocation({

        type: 'gcj02',

        success: (e) => {

          var lat0 = e.latitude

          var lng0 = e.longitude

          var lat = result[markerId].latitude

          var lgt =result[markerId].longitude

          var dis =Math.floor(comm.GetDistance(lng0,lat0,lgt,lat));

          console.log('距你'+dis+'')

          // console.log(result[markerId])

          self.setData({

            ingma:result[markerId],

            dis:dis,

          })

        this.setData({

          flag:false,

          locat:true

        })


    },

    

  })

    

  },


toggleDialog: function () {

  this.setData({

    showDialog: false,

  })

},


//跳转


  toCase1(e){

    console.log(e.currentTarget.dataset.id)

    const id=e.currentTarget.dataset.id

          wx.navigateTo({

            url: '/packageA/page/case1/case1?id='+id,

          })

  },

})



3 结语

本次解决了小程序地图插入图标后 怎么实现点击图标弹出窗口的问题。这里使用到的是小程序自定义map组件标记点marker,这次只是介绍了marker的一个用法,如果后续有需要,会再出一期关于小程序地图的学习与使用。

目录
相关文章
|
7月前
|
小程序 定位技术 API
【社区每周】小程序码支持沙箱调试;开发文档新增产品地图(1月第二期)
【社区每周】小程序码支持沙箱调试;开发文档新增产品地图(1月第二期)
52 0
|
3月前
|
小程序 前端开发
微信小程序中 vant weapp 使用外部的icon作为图标的步骤
本文介绍了在微信小程序中使用Vant Weapp组件库时,如何将外部的icon作为图标引入的步骤。包括在项目中创建静态资源文件夹、在iconfont官网添加图标并生成在线链接、下载iconfont代码并解压到小程序目录中、修改iconfont.wxss文件将本地链接替换为在线链接、在全局样式文件中引入iconfont.wxss样式,以及在页面中使用图标的方法。
微信小程序中 vant weapp 使用外部的icon作为图标的步骤
|
4月前
|
小程序 前端开发 JavaScript
微信小程序结合PWA技术,提供离线访问、后台运行、桌面图标及原生体验,增强应用性能与用户交互。
微信小程序结合PWA技术,提供离线访问、后台运行、桌面图标及原生体验,增强应用性能与用户交互。开发者运用Service Worker等实现资源缓存与实时推送,利用Web App Manifest添加快捷方式至桌面,通过CSS3和JavaScript打造流畅动画与手势操作,需注意兼容性与性能优化,为用户创造更佳体验。
115 0
|
6月前
|
小程序 定位技术
uniapp微信小程序地图全屏显示配送范围
uniapp微信小程序地图全屏显示配送范围
117 1
|
6月前
|
XML 小程序 JavaScript
微信小程序如何使用地图
微信小程序如何使用地图
212 4
|
5月前
|
小程序 定位技术 API
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
371 0
|
5月前
|
小程序 前端开发
【微信小程序-原生开发】添加自定义图标(以使用阿里图标库为例)
【微信小程序-原生开发】添加自定义图标(以使用阿里图标库为例)
232 0
|
5月前
|
小程序
【微信小程序-原生开发】TDesign 实战模板——带性别图标的头像
【微信小程序-原生开发】TDesign 实战模板——带性别图标的头像
73 0
|
5月前
|
小程序 定位技术
【微信小程序-原生开发+TDesign】地图导航(wx.openLocation的使用)
【微信小程序-原生开发+TDesign】地图导航(wx.openLocation的使用)
90 0
|
5月前
|
小程序 JavaScript
【微信小程序-原生开发】实用教程03-自定义底部导航(含自定义tabBar导航高亮需点击两次的解决方案)
【微信小程序-原生开发】实用教程03-自定义底部导航(含自定义tabBar导航高亮需点击两次的解决方案)
146 0