uniapp 微信小程序 map自定义气泡customCallout

需求：要在marker的下方展示该站点名称，但默认的气泡是在上方，后查阅微信小程序官方文档发现marker属性有个customCallout可自定义气泡

直接上代码

<template><view class="page-body"><view class="page-section"><map id="map1" ref="map1"style="width: 100%; height: 100%;" :markers="markers":latitude="latitude" :longitude="longitude"       :scale="mapScale"@markertap="markertap"><cover-view slot="callout"><block v-for="(item, index) in customCalloutMarkerIds" :key="index"><cover-view  class="customCallout" :marker-id="item"><cover-view class="content">{{markers[index].stationName}}</cover-view></cover-view></block></cover-view></map></view></view>
</template>
<script>export default {data() {return {latitude: 30.17489176432292,longitude: 120.2113267686632,markers: [{id: 1,latitude: 30.174892900,longitude: 120.2113275343,iconPath: '../../static/images/icon_bus_stop@2x.png',width: 24 * 1.5,height: 38 * 1.5,stationName: '江晖大厦',distance: 10,lineList: ['735路区间岳连线', '415路', '105路', '203-2路'],customCallout: {anchorY: 70,anchorX: 0,display: 'ALWAYS',}}, {id: 2,latitude: 30.174894900,longitude: 120.2133285343,iconPath: '../../static/images/icon_bus_stop@2x.png',width: 24,height: 38,stationName: '滨康路口',distance: 20,lineList: ['735路', '415路', '105路', '203-2路'],customCallout: {anchorY: 70,anchorX: 0,display: 'NONE',}}, {id: 3,latitude: 30.172792900,longitude: 120.2133285343,iconPath: '../../static/images/icon_bus_stop@2x.png',width: 24,height: 38,stationName: '新都会',distance: 30,lineList: ['15路', '115路', '104路', '203M路'],customCallout: {anchorY: 70,anchorX: 0,display: 'NONE',},}], // 地图上markers列表customCalloutMarkerIds: [1,2,3],mapScale: 16, // 地图默认放大倍数}},methods: {markertap(e) {const that = thislet markers = this.markersmarkers.find(function(item, index){if(item.id == e.markerId){that.swiperCurrent = index  // 点击marker 实现底部滑到相对应的站点item.customCallout.display = 'ALWAYS' // 点击marker 显示站点名item.width = 24 * 1.5item.height = 38 * 1.5} else {item.customCallout.display = 'NONE'item.width = 24item.height = 38}})}}}
</script>
<style lang="less" scoped>
.page-body{width: 100%;height: 100%;position: absolute;overflow: hidden;.page-section{width: 100%;height: 100%;position: absolute;}.customCallout {box-sizing: border-box;background-color: #fff;background: #FFFFFF;box-shadow: 0px 4rpx 16px 0px rgba(189, 191, 193, 0.4);border-radius: 4rpx;display: inline-flex;padding: 6rpx 24rpx;justify-content: center;align-items: center;color: #2A7BE2;}
}
</style>

最后效果图

uniapp 微信小程序 map自定义气泡customCallout相关推荐

uniapp微信小程序 map地图markers图标不显示，markers图标真机调试不显示
uniapp微信小程序 map地图markers图标不显示,markers图标真机调试不显示举例: 预期效果如下,蓝色为用户位置,红色为店铺位置均为自定义图标实际发布后手机上的效果 (此处忽略位置 ...
微信小程序map自定义组件实现
效果实际手机效果不会点击时突然闪一下,气泡弹窗也不会被其他坐标点挡住图片子组件WXML <mapid="map"setting="{{setting}}&qu ...
微信小程序 map 自定义地图数据，实现方式+思路+代码（最简易的实现方式）
先上效果图,总的来说就是在地图上加上自己需要的数据注意事项: requestSimple是我封装的提交函数,我的其他帖子有. 重点掌握.(重点) 1.官方map组件,提供了自定义标记(markers ...
uniapp微信小程序使用自定义字体和外部字体
这里主要介绍两个方法: 第一个是引用阿里巴巴字体库,这个方法比较简单,但是字体种类比较少.同时只适用于需要改变的字比较少的情况第二个是利用腾讯云存储,把自己喜欢的字体下载下来,存储在腾讯云里面,这种 ...
使用uniapp 开发微信小程序map组件在开发过程中遇到的问题
** 使用uniapp 开发微信小程序map组件在开发过程中遇到的问题 [菜鸟记录] ** 发现的问题: 如果给map设置初始化scale的话,手指缩放地图后,点击按钮让地图再次回到和初始化一样的 s ...
uniapp - [微信小程序] 超详细实时录音功能，录制外部声音及播放上传到服务器（支持录音完毕生成 mp3、试听音频(带进度条)、暂停录音、重新录音、限制录音最大时长、自定义音频名称等功能）
前言网上的教程都太乱了,功能不好用且一堆 BUG,没有注释很难改造示例为自己用. 本文实现了 uniapp 微信小程序平台,授权麦克风进行录音并保存为音频的功能,内置播放器可播放录音文件, 您直接复 ...
vue uniapp 微信小程序搜索下拉框模糊搜索
vue uniapp 微信小程序搜索下拉框模糊搜索话不多说直接贴代码 template <template><view class="index"> ...
uni-app 微信小程序分享按钮
uni-app 微信小程序分享按钮官方文档说明在 manifest.json 的 App SDK 配置里,勾选微信消息及朋友圈,并填写相关 appkey,微信 appkey 在需要分享的页面填写: ...
uni-app 微信小程序 + 友盟统计 sdk
在开发小程序时,有些功能会需要统计用户点击次数.登录人数.访问时长等数据,用来分析用户的一些行为:这里分享一下用 uni-app 开发微信小程序借助友盟 SDK 在前端页面中埋点统计的实现过程: 1. ...

uniapp 微信小程序 map自定义气泡customCallout

uniapp 微信小程序 map自定义气泡customCallout相关推荐

最新文章

热门文章