<template>
<view class="content">
<map class="map" id="map1" ref="map1" :scale="scale" :longitude="location.longitude"
:latitude="location.latitude" :enable-zoom="enableZoom" :enable-rotate="enableRotate" :markers="markers"
@labeltap="onLabeltap" :include-points="includePoints"></map>
</view>
</template>
<script>
const size = uni.upx2px(140)
let anchorX = 20
const anchorY = Math.abs(((size - 36 + size) / 2))
const testMarkers = [
{
id: 1,
latitude: 39.9086920000,
longitude: 116.3974770000,
iconPath: '/static/total_icon.png',
width: size,
height: size,
alpha: 0.4,
label: {
x: -(anchorX),
y: -(anchorY),
fontSize: 13,
content: '方恒国际 阜通东大街6号',
color: '#ffffff',
textAlign: "center",
borderRadius: 15,
borderColor: '#3A77F6',
bgColor: '#3A77F6',
display: "ALWAYS",
}
}
];
module.exports = {
data() {
return {
location: {
longitude: 116.3974770000,
latitude: 39.9086920000
},
controls: [{
id: 1,
position: {
left: 5,
top: 180,
width: 30,
height: 30
},
iconPath: '/static/logo.png',
clickable: true
}],
showLocation: false,
scale: 13,
showCompass: true,
enable3D: true,
enableOverlooking: true,
enableOverlooking: true,
enableZoom: true,
enableScroll: true,
enableRotate: true,
enableSatellite: false,
enableTraffic: false,
polyline: [],
markers: testMarkers,
polygons: [],
circles: [],
includePoints: [],
rotate: 0,
skew: 0
}
},
onLoad() {},
mounted() {
this.map = uni.createMapContext("map1", this);
},
methods: {
onLabeltap(e) {
console.log('onLabeltap', e)
}
}
}
</script>
<style>
.content {
flex: 1;
}
.map {
width: 750rpx;
/* #ifdef H5 */
width: 100%;
/* #endif */
flex: 1;
background-color: #f0f0f0;
}
.scrollview {
/* #ifdef H5 */
margin-top: 240px;
/* #endif */
flex: 1;
padding: 10px;
}
.list-item {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
padding: 5px 0px;
}
.list-text {
flex: 1;
}
.button {
margin-top: 5px;
margin-bottom: 5px;
}
</style>
- 发布:2021-05-23 23:31
- 更新:2021-06-10 17:46
- 阅读:478
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: WIN10 企业版
HBuilderX类型: 正式
HBuilderX版本号: 3.1.13
手机系统: Android
手机系统版本号: Android 6.0
手机厂商: 华为
手机机型: MLA-AL10
页面类型: nvue
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
nvue,安卓 map label 被icon被覆盖 被覆盖的部分无法触发@labeltap,请看工程代
nvue,安卓 map label 被icon被覆盖 被覆盖的部分无法触发@labeltap,请看工程代
预期结果:
在nvue下,希望安卓map的map组件所用到的label 不被icon被覆盖(lable在icon的上方且能正确触发labeltap) 被覆盖的部分无法触发@labeltap
在nvue下,希望安卓map的map组件所用到的label 不被icon被覆盖(lable在icon的上方且能正确触发labeltap) 被覆盖的部分无法触发@labeltap
实际结果:
nvue,安卓 map label 被icon被覆盖 被覆盖的部分无法触发@labeltap
nvue,安卓 map label 被icon被覆盖 被覆盖的部分无法触发@labeltap
liuxl126
你解决了吗
2021-08-24 14:00