微信小程序:map组件标注callout与label简单用法

本文介绍了微信小程序中map组件的使用,包括如何实现Callout气泡和Label的显示与交互。详细讲解了js代码中对地图标注的处理,如设置Marker的属性、Label内容和事件响应,以及解决点击后被遮挡的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

效果图

在这里插入图片描述

在这里插入图片描述

.js代码

图片一对应的效果

 // 获取全部信息--对应图片1
 getTodayAllInfo(){
   var that = this
      var params ={}
      request._get('/todaySignAllInfo', params, res => {
        if(res.code == 1){
         var attendanceSignList = res.result.attendanceSignList //全部人员
         //人员所在位置经纬度,
         if(attendanceSignList&& attendanceSignList.length>0){
          that.setData({
            latitude: attendanceSignList[0].lat,
            longitude: attendanceSignList[0].lon,
           })
           //获取地图 markers
            var markersList = []
            var markId= 0 
            attendanceSignList.forEach((item) => {
              markersList.push({ 
                  id: markId++, //标注点id
                  openId: item.openId, //人员id
                  latitude: item.lat,
                  longitude: item.lon,
                  iconPath: that.data.uploadUrl + 'icon/coordinate_header_icon.png',
                  width: 30,
                  height: 40,
                  //气泡callout
                    callout: {
### 实现微信小程序地图组件中的自定义Label标注微信小程序的地图组件中添加自定义 `label` 标注可以通过配置 `markers` 属性来完成。每个标记点都可以设置其显示的文字信息作为标签,这些文字会悬浮于图标之上。 #### 配置 markers 的 label 属性 为了给特定地点增加带有说明性的文本,在创建 marker 对象时需指定 `label` 字段。此字段接受一个对象参数,该对象允许开发者设定诸如内容、颜色、字体大小等样式属性[^1]。 ```json { "latitude": 23.099994, "longitude": 113.324520, "iconPath": "/image/location.png", "width": 30, "height": 30, "label": { "content": "T.I.T 创意园", // 显示的内容 "color": "#ff0000", // 文字的颜色 "fontSize": 16, // 字体尺寸(px单位) "borderRadius": 6, // 圆角半径(px单位),默认为无圆角 "bgColor": "#ffffff", // 背景填充色,默认白色 "textAlign": "center" // 文本对齐方式,默认居中 } } ``` 上述 JSON 片段展示了如何通过 `label` 来定制化每一个地理坐标的描述性信息,并且能够调整外观以适应不同的视觉需求。 #### 使用 wx:for 动态渲染多个 Marker 和 Label 当有多个位置需要标注时,可以利用 WXML 中的 `wx:for` 指令遍历数据列表并动态生成相应的 HTML 结构。这样不仅简化了代码结构,还提高了可维护性和灵活性。 ```html <map id="myMap" longitude="{{location.longitude}}" latitude="{{location.latitude}}" scale="14"> <cover-view wx:for="{{markerList}}" wx:key="id"> <cover-image src="{{item.iconPath}}" style="position:absolute;left:{{item.left}};top:{{item.top}};" /> <!-- 如果希望进一步增强交互体验,还可以在此处嵌入其他 cover-* 元素 --> </cover-view> </map> ``` 注意这里使用的是 `<cover-view>` 及 `<cover-image>` 组件而非普通的视图或图像元素,因为它们能够在 map 上正常工作而不被遮挡[^3]。 #### 设置 Map 组件的基础样式 为了让页面看起来更加美观和谐,应该适当调整 map 容器及其内部控件的整体布局配色方案。这通常涉及到 CSS 文件内的全局选择器或是局部类名的选择应用。 ```css /* 基础页面背景 */ page { background-color: #F8F8F8; } .map-container { position: relative; width: 100%; height: 300px; } .btn-area { margin-top: 60rpx; box-sizing: border-box; width: 100%; padding: 0 30rpx; } ``` 以上就是关于如何在微信小程序内实现带自定义标签的地图标注的方法介绍。除了基本的坐标和图片外,还能附加更多个性化的展示效果,比如气泡窗口(callout)等高级特性也可以考虑加入进来提升用户体验。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值