uniapp 微信小程序 map自定义气泡customCallout
需求:要在marker的下方展示该站点名称,但默认的气泡是在上方,后查阅微信小程序官方文档发现marker属性有个customCallout可自定义气泡直接上代码<template><view class="page-body"><view class="page-section"><mapid="map1" ref="map1"style="width:
·
需求:要在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 = this
let markers = this.markers
markers.find(function(item, index){
if(item.id == e.markerId){
that.swiperCurrent = index // 点击marker 实现底部滑到相对应的站点
item.customCallout.display = 'ALWAYS' // 点击marker 显示站点名
item.width = 24 * 1.5
item.height = 38 * 1.5
} else {
item.customCallout.display = 'NONE'
item.width = 24
item.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>
最后效果图
更多推荐
已为社区贡献1条内容
所有评论(0)