效果图

.js代码

图片一对应的效果

 // 获取全部信息--对应图片1getTodayAllInfo(){var that = thisvar 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,})//获取地图 markersvar markersList = []var markId= 0 attendanceSignList.forEach((item) => {markersList.push({ id: markId++, //标注点idopenId: item.openId, //人员idlatitude: item.lat,longitude: item.lon,iconPath: that.data.uploadUrl + 'icon/coordinate_header_icon.png',width: 30,height: 40,//气泡calloutcallout: {display:'ALWAYS',// 常显气泡content: item.userName,  //名称文本color: '#fff',  //文本颜色borderRadius: 5,  //边框圆角borderWidth: 1,  //边框宽度borderColor: '#0060ff',  //边框颜色bgColor: '#0060ff',  //背景色padding: 5,  //文本边缘留白textAlign: 'center'  //文本对齐方式。有效值: left, right, center}})})//标注that.setData({markers: markersList, // 图一展示的markers 和气泡信息})}}})},

图一对应的Callout气泡点击事件

markerCalloutTap(e){var markerId = e.markerIdthis.data.markers.forEach((item) => {if(markerId == item.id){this.getOneInfo(item.openId) //获取单个信息}})
},

图片二效果

// 获取单个信息
getOneInfo(openId){
var that = this
var params ={
openId:openId,
}
request._get(’/todaySignSingleInfo’, params, res => {
if(res.code == 1){
var oneInfoList = res.result
//获取地图 markers
var markersList = []
var markId= 1
oneInfoList.forEach((item) => {
var lable = markId.toString() //marker的lable图标上的数字标签
markersList.push({
id: markId++, //标注点id
openId: item.openId, //人员id
userName:item.userName, //名称
createDate: item.createDate,//创建时间
positionAddress:item.positionAddress,//地址
latitude: item.lat,
longitude: item.lon,
zIndex:-15, //展示层级
iconPath: that.data.uploadUrl + ‘icon/coordinate_dw_icon.png’,
width: 30,
height: 40,
alpha:0.7,
//气泡label
label:{
content: lable, //文本
color: ‘#00caa1’, //文本颜色
padding: 3, //文本边缘留白
anchorX: -9,
anchorY: -39,
fontSize: 16,
textAlign: ‘center’ //文本对齐方式。有效值: left, right, center
},

       })})//标注that.setData({markers: markersList,})if(markersList&&markersList.length>0){var oneInfosLast = markersList[markersList.length-1]//标注that.setData({showOneInfo: true, //展示最新的一条单条信息详情'oneInfos.id': oneInfosLast.id,'oneInfos.userName': oneInfosLast.userName,'oneInfos.createDate': oneInfosLast.createDate,'oneInfos.positionAddress': oneInfosLast.positionAddress,})}else{//标注that.setData({showOneInfo: false, //展示最新的一条单条信息详情'oneInfos.id': '','oneInfos.userName': '','oneInfos.createDate': '','oneInfos.positionAddress': '',})}}})

图二对应的lable事件和marker事件

（因真机版map的marker的label点击一次后，被icon图标遮挡，所以特地给icon图标设置了一个透明度，使得点击之后，数字依然可见，但lable事件无法被点击，所以在lable事件的基础上，添加了一个marker事件，并添加了一个标志，只有点击个人信息marker图标时，才执行对应的方法）

// marker点击事件-查询单条信息
markertap(e){var isShowOneInfo = this.data.showOneInfo //只有是单条信息点击mark事件才执行if(isShowOneInfo){var markerId = e.markerIdthis.data.markers.forEach((item) => {if(markerId == item.id){this.setData({showOneInfo: true,'oneInfos.id': item.id,'oneInfos.userName': item.userName,'oneInfos.createDate': item.createDate,'oneInfos.positionAddress': item.positionAddress})}})}
},// marker  Lable点击事件-查询一个单条信息markerLableTap(e){var markerId = e.markerIdthis.data.markers.forEach((item) => {if(markerId == item.id){this.setData({showOneInfo: true,'oneInfos.id': item.id,'oneInfos.userName': item.userName,'oneInfos.createDate': item.createDate,'oneInfos.positionAddress': item.positionAddress,})}})
},

wxml

 <view  hover-class="none" hover-stop-propagation="false" class="pos_relative" style="padding-top:{{statusBarHeight+45}}px; height:calc(100% - {{statusBarHeight+45}}px)"><!-- 地图 --><map id="map" longitude="{{longitude}}" latitude=" {{latitude}}" markers="{{markers}}"bindcallouttap="markerCalloutTap"bindlabeltap="markerLableTap"bindmarkertap="markertap"scale="11" show-location style="width: 100%; height: 100%;"></map></view>
<!-- 个人记录详情 -->
<view class="unSign-list oneInfos-list " wx:if="{{showOneInfo}}"><view class="unitSign-oneInfo-cell"><view class="oneInfos-title ml-20 mrt-10 pad10"><view class="fs_16 f_weight">{{oneInfos.id}}</view><view class="fs_13 ">记录</view></view><view class="cell-item ml-20"><view class="fs_14 f_weight">{{oneInfos.positionAddress}}</view><view class="fs_13 opac_05">{{oneInfos.createDate}}</view></view></view></view>

微信小程序：map组件标注callout与label简单用法相关推荐

微信小程序map组件地图定位当前位置
小程序map组件的应用方式:简单版 wxml: <map id="map" latitude="{{latitude}}" longitude=" ...
微信小程序--map组件视图无法更新的问题
在使用微信小程序 map组件的时候,会有一个小问题.当出现markers是一个数组,在切换数据的时候,页面会残留上次留下来的markers. 在js中使用setData更新markers数据后,地图上 ...
使用uniapp 开发微信小程序map组件在开发过程中遇到的问题
** 使用uniapp 开发微信小程序map组件在开发过程中遇到的问题 [菜鸟记录] ** 发现的问题: 如果给map设置初始化scale的话,手指缩放地图后,点击按钮让地图再次回到和初始化一样的 s ...
微信小程序----map组件实现检索【定位位置】周边的POI
WXRUI体验二维码如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 声明 bug: 页面顶部分类[汽车服务.汽车销售等]列表和页脚的详细地址在真机测试是会出现不显 ...
微信小程序 MinUI 组件库系列之 label 标签组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
微信小程序 MinUI 组件库系列之 label 标签组件 1
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
微信小程序map组件查找周围各种场所(通过腾讯位置服务)
废话不多说,直接写咋实现主要用到了腾讯位置服务里面的微信小程序JavaScript SDK,你得先申请一个开发者密钥,这里就不多说了实现效果如下,这里面是搜索周围的餐厅首先wxml代码 < ...
微信小程序----map组件实现（获取定位城市天气或者指定城市天气数据）
效果图实现原理采用高德地图微信小程序开发API(getWeather),如果 city 属性的值为空(或者没有city属性),默认返回定位位置的天气数据:如果 city 不为空,则返回 city ...
微信小程序：map组件的简单使用，标注callout与label简单用法
效果图 wxml <mapid="myMap"style="width: 100%; height: 30 ...

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

效果图

.js代码

图片一对应的效果

图一对应的Callout气泡点击事件

图片二效果

图二对应的lable事件和marker事件

wxml

微信小程序：map组件标注callout与label简单用法相关推荐

最新文章

热门文章

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

效果图

.js代码

图片一对应的效果

图一对应的Callout气泡点击事件

图片二效果

图二对应的lable事件 和marker事件

wxml

微信小程序：map组件标注callout与label简单用法相关推荐

最新文章

热门文章

图二对应的lable事件和marker事件