<template>
<view style="position:fixed;height:500px: rgba(238,238,238,0.8);">
<map :controls="controls" id="map" @tap="showlog" style="width: 500px;height: 500px;" enable-poi="true" show-location="true"></map>
</view>
</template>
<script>
export default {
data() {
return {
controls: [{
id: 1,
position: {
left: 0,
top: 0,
width: 60,
height: 60
},
iconPath: '/static/icons/page/target.png',
clickable: true
}],
}
},
methods: {
showlog(res){
console.log(res);
//this._mapContext.fromScreenLocation(res.)
},
}
}
</script>
<style>
</style>
咳
- 发布：2022-03-04 07:19
- 更新：2022-03-04 15:52
- 阅读：327
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 设备名称 DESKTOP-O8KRVCG 处理器 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz 2.42 GHz 机带 RAM 16.0 GB (15.8 GB 可用) 设备 ID 203ED2D7-5A18-4349-92D5-A7818D0157BB 产品 ID 00342-36327-00835-AAOEM 系统类型 64 位操作系统, 基于 x64 的处理器 笔和触控 没有可用于此显示器的笔或触控输入
HBuilderX类型： 正式
HBuilderX版本号： 3.3.11
手机系统： Android
手机系统版本号： Android 11
手机厂商： 小米
手机机型： Redmi Note 9 Pro
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
代码存成页面，外层的style里面的position:fixed,加上或者去掉，就可以看到结果。
<template>
<view style="position:fixed;height:500px: rgba(238,238,238,0.8);">
<map :controls="controls" id="map" @tap="showlog" style="width: 500px;height: 500px;" enable-poi="true" show-location="true"></map>
</view>
</template>
<script>
export default {
data() {
return {
controls: [{
id: 1,
position: {
left: 0,
top: 0,
width: 60,
height: 60
},
iconPath: '/static/icons/page/target.png',
clickable: true
}],
}
},
methods: {
showlog(res){
console.log(res);
//this._mapContext.fromScreenLocation(res.)
},
}
}
</script>
<style>
</style>
代码存成页面，外层的style里面的position:fixed,加上或者去掉，就可以看到结果。
<template>
<view style="position:fixed;height:500px: rgba(238,238,238,0.8);">
<map :controls="controls" id="map" @tap="showlog" style="width: 500px;height: 500px;" enable-poi="true" show-location="true"></map>
</view>
</template>
<script>
export default {
data() {
return {
controls: [{
id: 1,
position: {
left: 0,
top: 0,
width: 60,
height: 60
},
iconPath: '/static/icons/page/target.png',
clickable: true
}],
}
},
methods: {
showlog(res){
console.log(res);
//this._mapContext.fromScreenLocation(res.)
},
}
}
</script>
<style>
</style>
预期结果：
position:fixed是 top为地图顶部定位。
position:fixed是 top为地图顶部定位。
实际结果：
position:fixed是 top:0px时控件地图顶部定位偏移。
position:fixed是 top:0px时控件地图顶部定位偏移。
bug描述：
map组件外层的view用fixed定位时，map的controls的top坐标有异常。明明top是0，还是定位不到地图顶部。奇怪的时如果取消该页面的系统导航栏 "navigationStyle": "custom", 的话，top定位就正常了。
咳 (作者)
谢谢，期望尽快修复。
2022-03-04 19:03