uniapp地图标记点的点击事件

简介: uniapp地图标记点的点击事件
<map id="mapss" :markers="covers"@markertap="tapMap">
 
</map>
                    covers:[{
            id: 99998,
            callout: {
              color: '#ffffff', //文字颜色
              fontSize: 15, //文本大小
              borderRadius: 15, //边框圆角
              padding: '10',
              bgColor: '#406390', //背景颜色
              content: getApp().globalData.address,
            }, //设置点击后显示的文字及其样式
            latitude: this.latitude,
            longitude: this.longitude,
            iconPath: "https://wwz.jingyi.icu/uploads/20231110/bcd43e5c1b4c272265122dd0874fc05f.png",
            width: 40, //控件宽
            height: 40, //控件高
            rotate: 0, // 旋转度数
          }]
            tapMap(e) {
        console.log(e);
      },

首先设置点击事件@markertap事件,然后他有个自带的(e)参数

然后covers中要有个id,这样才能获取到对应的经纬度,

就如途中的markerid就是数据中的id,通过这个markerid获取指定的经纬度

目录
打赏
0
2
2
0
22
分享
相关文章
uniapp小程序地图选点uni.getLocation() uni.chooseLocation()
思路先通过uni.getLocation()获取当前位置,然后uni.chooseLocation()通过这个函数进行地图选点
761 0
低代码可视化Uniapp点击事件-代码生成器
低代码可视化Uniapp点击事件-代码生成器
92 0
低代码可视化Uniapp点击事件-代码生成器
uniapp微信小程序地图全屏显示配送范围
uniapp微信小程序地图全屏显示配送范围
147 1
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
801 0
uniapp组件map地图组件使用
uniapp组件map地图组件使用
396 0
|
9月前
|
uniapp实现地图电子围栏功能
uniapp实现地图电子围栏功能
330 0
可直接复制,踩坑以及解决方法,成功版本)uniapp H5地图选点经纬度,地址详细信息
可直接复制,踩坑以及解决方法,成功版本)uniapp H5地图选点经纬度,地址详细信息
651 1
可直接复制,踩坑以及解决方法,成功版本)uniapp H5地图选点经纬度,地址详细信息
uniapp 地图组件(map)的使用总结
uniapp 地图组件(map)的使用总结
660 0

热门文章

最新文章