网页H5获取当前坐标,完整demo

本文介绍了一个使用H5获取当前坐标的完整示例,通过JavaScript实现。在手机上运行效果理想,精度较高,但在电脑上可能会出现定位超时或位置偏差较大的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

先展示效果:



手机运行效果很好,也很准,电脑嘛,有时超时,有时偏出80多公里。

css部分:

#allmap {
	 overflow: hidden;margin:0;z-index: 10;
}
.savept{position: fixed;left:40%;z-index: 11;}
.mapbox{display: none;}


网页js代码:

var getpo = null;
var lat=0,lgt=0;
var dizhi,point;
function showmap(){
	//不知道百度地图什么样式,css控制位置不好使,只能在地图展示时,把页面隐藏
	$(".yemian").hide();
	var h=$(document).height()-100;
	var w=$(document).width();
	$("#allmap").css("height",h+"px");//设置地图容器的高度
	$("#allmap").css("width",w+"px");
	$("#allmap").show();
	$(".m
<think>好的,用户想在UniApp中获取点击事件的屏幕坐标,需要示例代码。首先,我需要确定UniApp中如何处理点击事件。UniApp是基于Vue.js的,所以事件处理应该和Vue类似。用户提到的是点击事件的坐标,可能需要用到touchstart或者tap事件。在UniApp中,通常使用@tap来处理点击事件。然后,事件对象会包含坐标信息,比如pageX和pageY,这些是相对于页面的坐标。接下来,我得考虑不同平台的兼容性。UniApp跨多个平台,如小程序、H5、App,可能需要确认这些坐标在不同环境下是否一致。例如,在小程序中,touch事件和普通点击事件可能有差异,但@tap应该是通用的。然后,编写示例代码。需要在模板中绑定@tap事件,并在方法中获取事件对象。比如,在view组件上添加@tap="handleTap",然后在methods里定义handleTap函数,通过event参数获取touches数组中的坐标。另外,用户可能需要屏幕坐标,而不仅仅是页面内的相对坐标。这时候可能需要使用uni.getSystemInfoSync()来获取窗口的宽度和高度,或者考虑设备像素比,但一般情况下,pageX和pageY已经足够,因为它们是相对于屏幕的。还要注意,在部分平台下,比如NVue,事件处理可能有所不同,需要确认用户是否在NVue环境中。但根据常见情况,先提供标准Vue页面的解决方案。 最后,测试代码是否正确,比如在点击时通过console.log输出坐标,或者显示在页面上。确保代码简洁,并添加注释说明关键部分。</think>在UniApp中获取点击事件的屏幕坐标可以通过`@tap`事件实现。以下是具体实现方法: ### 实现步骤 1. **绑定点击事件** 在模板中使用`@tap`绑定事件处理器: ```html <view class="container" @tap="getTapCoordinates"> <text>点击任意位置获取坐标</text> <text>当前坐标:{{x}}, {{y}}</text> </view> ``` 2. **获取坐标数据** 通过事件对象的`touches[0]`获取坐标信息: ```javascript export default { data() { return { x: 0, y: 0 } }, methods: { getTapCoordinates(e) { const { pageX, pageY } = e.touches[0] // 获取点击坐标 this.x = pageX.toFixed(2) this.y = pageY.toFixed(2) // 调试输出 console.log('屏幕坐标:', { x: this.x, y: this.y }) } } } ``` 3. **坐标转换说明** 当需要转换为相对容器的坐标时,可使用`uni.createSelectorQuery()`获取元素位置: ```javascript getRelativePosition(e) { const query = uni.createSelectorQuery().in(this) query.select('.container').boundingClientRect(rect => { const offsetX = e.touches[0].pageX - rect.left const offsetY = e.touches[0].pageY - rect.top }).exec() } ``` ### 注意事项 1. 跨平台差异: - H5端支持标准DOM事件坐标 - 小程序端坐标单位为`px` - App端需注意`nvue`页面的特殊事件处理[^1] 2. 坐标系类型: $$ \begin{cases} \text{pageX/Y} & \text{页面绝对坐标} \\ \text{clientX/Y} & \text{视口相对坐标} \\ \text{screenX/Y} & \text{设备屏幕坐标} \end{cases} $$ ### 扩展应用 结合`movable-area`组件可实现拖动定位: ```html <movable-area> <movable-view @change="onDrag" :x="x" :y="y" ></movable-view> </movable-area> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值