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获取指定的经纬度

相关文章
|
小程序 定位技术
uniapp小程序地图选点uni.getLocation() uni.chooseLocation()
思路先通过uni.getLocation()获取当前位置,然后uni.chooseLocation()通过这个函数进行地图选点
728 0
|
27天前
|
数据可视化 JavaScript 前端开发
低代码可视化Uniapp点击事件-代码生成器
低代码可视化Uniapp点击事件-代码生成器
45 0
低代码可视化Uniapp点击事件-代码生成器
|
5月前
|
小程序 定位技术
uniapp微信小程序地图全屏显示配送范围
uniapp微信小程序地图全屏显示配送范围
102 1
|
4月前
|
小程序 定位技术 API
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
337 0
|
6月前
|
开发框架 JSON 定位技术
uniapp中map组件动态加载marks标记
uniapp中map组件动态加载marks标记
543 5
|
6月前
|
移动开发 定位技术
uniapp组件map地图组件使用
uniapp组件map地图组件使用
352 0
|
6月前
|
定位技术
uniapp实现地图电子围栏功能
uniapp实现地图电子围栏功能
259 0
|
移动开发 定位技术 Android开发
可直接复制,踩坑以及解决方法,成功版本)uniapp H5地图选点经纬度,地址详细信息
可直接复制,踩坑以及解决方法,成功版本)uniapp H5地图选点经纬度,地址详细信息
566 1
可直接复制,踩坑以及解决方法,成功版本)uniapp H5地图选点经纬度,地址详细信息
|
6月前
|
JavaScript 前端开发 定位技术
uniapp中地图制作
uniapp中地图制作
73 0
|
6月前
|
小程序 定位技术
uniapp 地图组件(map)的使用总结
uniapp 地图组件(map)的使用总结
568 0