<view class="container">
<view class="container-map"><map class="my-map" show-location="true" ref="box" :markers="marker" :latitude="latitude" :longitude="longitude" :scale="scale"></map></view>
</view>
</template>
<script>
export default {
data() {
return {
longitude: '',
latitude: '',
scale: 14
};
},
onLoad() {
this.setMarkers();
},
methods: {
setMarkers() {
var venue = [
{
id: 0,
latitude: 29.673651,
longitude: 106.432643,
title: 'test',
iconPath: '../../static/images/gps/GPS_State_running.png',
width: 25,
height: 25,
rotate: 80,
callout: {
content: '1233456',
color: '#ffffff',
fontSize: 14,
padding: 5,
display: 'ALWAYS',
bgColor: '#2a87dd',
textAlign: 'center',
borderRadius: 10
}
}
];
this.latitude = 29.673651;
this.longitude = 106.432643;
this.markers.push.apply(this.markers, venue);
}
},
computed: {
marker() {
return this.markers.slice(0);
}
}
};
</script>
<style lang="scss">
.container {
flex: 1;
}
.container-map {
flex: 1;
}
.my-map {
width: 750upx;
height: 800upx;
z-index: 100;
}
</style>```
- 发布:2020-06-02 14:27
- 更新:2020-06-15 10:56
- 阅读:1368
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: Windows 10
HBuilderX版本号: 2.7.10
手机系统: Android
手机系统版本号: Android 8.0
手机厂商: 三星
手机机型: 三星 G9350
页面类型: nvue
打包方式: 云端
项目创建方式: CLI
CLI版本号: 当前最新版
操作步骤:
预期结果:
想要的效果是 markers 设置 rotate 角度 callout气泡 始终保持水平 不跟随旋转
想要的效果是 markers 设置 rotate 角度 callout气泡 始终保持水平 不跟随旋转
实际结果:
markers 设置 rotate 角度 callout气泡会跟随旋转 上面的文本就是歪的
markers 设置 rotate 角度 callout气泡会跟随旋转 上面的文本就是歪的
bug描述:
APP nvue 中 的map markers 上的气泡callout 会跟随 markers 设置的rotate 旋转
第一张图是 努比亚 z17 安卓版本 9.0
第二张图是 Hisense A2T 安卓版本 7.1.2