这几天做地图的时候碰到点小麻烦,在地图上添加好标志物后,点击标志物弹出导航选项。结果弹框位置一直偏差,特此简单测试,记录。
测试很简单,一块区域,鼠标在区域内点击,在点击处绘制另一个区域。后来又加了个按钮用来关闭。
直接上代码:
<template>
<view class="mos" @click="move">
<view v-show="isShow" class="mosare" :style="mosPosition">
<button class="bt" @click.stop="close" type="default">关闭</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
mos_x: 50,
mos_y: 50,
isShow: false
}
},
methods: {
move(e) {
console.log(e); //打印 e 属性
this.isShow = true;
this.mos_x = e.touches[0].pageX - e.target.offsetLeft;
this.mos_y = e.touches[0].pageY - e.target.offsetTop;
},
close() {
this.isShow = false;
}
},
computed: {
mosPosition: function() {
return "left:" + (this.mos_x) + "px;top:" + (this.mos_y) + "px";
}
}
}
</script>
<style>
.mos {
width: 500px;
height: 250px;
position: absolute;
left: 250px;
top: 50px;
background-color: #4CD964;
}
.mosare {
width: 25px;
height: 25px;
background-color: #007AFF;
position: absolute;
}
.bt {
width: 70px;
height: 40px;
}
</style>
打印的e 属性: e.target.offsetTop 父组件距离顶端位置 。
e.touches[0].pageY 点击位置在整个页面的位置,包括已经滚动出窗口的部分。
绘图,是在父组件中绘制的,所以具体的坐标就是 (e.touches[0].pageY- e.target.offsetTop )
有关其他 位置的属性可以参考: