漏刻有时百度地图API实战开发(1)华为手机无法使用addEventListener click 的兼容解决方案

在这里插入图片描述

现象

漏刻有时项目开发中的调用了百度地图API,在PC端、IOS和安卓机型测试都没有问题。但是使用华为手机部分型号时,前端在监听点击事件的时候是使用 map.addEventListener('click',function(){...}),无法触发。或

原理

通过监听touchstart和touchmove两个事件中,x1,y1和x2,y2的差值(绝对),如果大于10px那么认为是拖动,否则认为是点击。

监听方式

在JavaScript中,map.addEventListener用于在Map对象上添加事件监听器。使用各种类型的事件,比如点击(click)、鼠标悬停(mouseover)等。当在地图上点击时,会触发一个事件,然后调用提供的函数。这个函数接收一个事件对象,从中可以获取关于被点击地点的信息。

当然,也可以绑定其他的事件,比如mouseover、mouseout等,只需要将事件类型替换即可。

    //地图监听事件
    map.addEventListener('click', function (e) {
        var targets = e.overlay;
        //清除覆盖物;
        map.clearOverlays();
        var x = e.point.lng;
        var y = e.point.lat;
        var newPoint = new BMap.Point(x, y);
    })

解决方案

    /*安卓手机端监听无效事件 - Begin*/
    map.addEventListener("touchmove", function (e) {
        map.enableDragging();
    });
    map.addEventListener("touchend", function (e) {
        map.disableDragging();
    });
    map.disableDragging();
    map.enableScrollWheelZoom(true);
    /*安卓手机端监听无效事件 - End*/

参考链接:

  • https://blog.csdn.net/yyyuuueeee/article/details/49511173
  • https://www.cnblogs.com/muzhe/articles/10032893.html
  • https://www.jianshu.com/p/68737255e5ed?tdsourcetag=s_pcqq_aiomsg

@漏刻有时

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/120206.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Android 常用 UI 组件

目录 ​编辑 1. View 和ViewGroup 2. Android UI 开发概述 2.1 界面布局开发 2.2 控件开发 2.3 AdapterView 与 Adapter 开发 2.4 UI 组件开发 2.5 自定义 View、图形图像和动画 1. View 和ViewGroup Android中所有的UI元素都是使用View和ViewGroup对象建立的,…

java split字符串作业

建立一个字符串操作类(StringDemo),在main函数中做一下操作: 1、定义字符串变量String s1”I am a good student”; String s2”I am a good worker”; String s3”3,6,12,20”; 2、用compareTo方法比较s1和s2的大小,并…

Vue - Syntax Error: TypeError: this.getOptions is not a function 项目运行时报错,详细解决方案

报错问题 关于此问题网上的教程都无法解决,如果您的报错与本文相似,本文即可 100% 完美解决。 在 vue2.js 项目中,执行 npm run serve 运行时出现如下报错信息, Syntax Error: TypeError: this.getOptions is not a function 解决方案 按照以下步骤,即可完美解决。 这个错…

CRM中的销售机会管理是什么?三个步骤帮你创建销售渠道

企业销售业务中,有个名词叫做“机会管理”,有效的机会管理可以帮助销售人员准确地抓住潜在客户群体,并将其转化为真正的客户、持续带来收入。CRM客户管理系统也是销售机会管理的一个重要工具,帮助销售人员与正确的人建立起关系&am…

python 之 集合的相关知识

文章目录 1. 创建集合使用花括号 {}使用 set() 函数 2. 集合的特点3. 集合操作添加元素删除元素 4. 集合运算5. 不可变集合总结 在 Python 中,集合(Set)是一种无序且不重复的数据集合。它是由一组唯一元素组成的。下面是关于集合的一些基本知…

(后续补充)vue+express、gitee pm2部署轻量服务器

首先 防火墙全部关闭算了 首先 防火墙全部关闭算了 首先 防火墙全部关闭算了 首先 防火墙全部关闭算了 首先 防火墙全部关闭算了 首先 防火墙全部关闭算了 关闭防火墙 systemctl stop firewalld 重新载入防火墙使设置生效 firewall-cmd --reload 后端的 pm2.config.cjs …

【小尘送书-第十一期】编程的基石,开发的核心:《算法秘籍》

大家好,我是小尘,欢迎你的关注!大家可以一起交流学习!欢迎大家在CSDN后台私信我!一起讨论学习,讨论如何找到满意的工作! 👨‍💻博主主页:小尘要自信 &#x1…

IC设计之《集成电路设计宝典》,共423页,可打印,快来领取吧~~~

集成电路(integrated circuit)是一种微型电子器件或部件。采用一定的工艺,把一个电路中所需的晶体管、电阻、电容和电感等元件及布线互连一起,制作在一小块或几小块半导体晶片或介质基片上,然后封装在一个管壳内&#…

Corel VideoStudio 会声会影2024剪辑中间的视频怎么删 剪辑中音乐太长怎么办

我很喜欢视频剪辑软件Corel VideoStudio 会声会影2024,因为它使用起来很有趣。它很容易使用,但仍然给你很多功能和力量。视频剪辑软件Corel VideoStudio 会声会影2023让我与世界分享我的想法!“这个产品的功能非常多,我几乎没有触…

【网络协议】

网络协议 1 网络通讯1.1 防火墙1.2 子网掩码1.3 网关1.4 2 SSH2.1 SSH2.2 SSH12.3 SSH2 3 Telnet4 Telnet/SSL5 NFS6 TFTP7 FTP8 SFTP9 HTTP10 HTTPS11 NAT12 加密 1 网络通讯 1.1 防火墙 所谓“防火墙”,是指一种将内部网和公众访问网(如Internet)分开的方法&…

顶板事故防治vr实景交互体验提高操作人员安全防护技能水平

建筑业在我国各行业中属危险性较大且事故多发的行业,在建筑业“八大伤害”(高处坠落、坍塌、物体打击、触电、起重伤害、机械伤害、火灾爆炸及其他伤害)事故中,高处坠落事故的发生率最高、危险性极大。工地现场培训vr坠落体验利用虚拟现实技术还原各种情…

[yarn]yarn异常

一、运行一下算圆周率的测试代码,看下报错 cd /home/data_warehouse/module/hadoop-3.1.3/share/hadoop/mapreduce hadoop jar hadoop-mapreduce-examples-3.1.3.jar pi 1000 1000 后面2个数字参数的含义: 第1个1000指的是要运行1000次map任务 …

大数据毕业设计选题推荐-超级英雄运营数据监控平台-Hadoop-Spark-Hive

✨作者主页:IT研究室✨ 个人简介:曾从事计算机专业培训教学,擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…

论文阅读:PVT v2: Improved Baselines with Pyramid Vision Transformer

来源:PVTv1 和PVTv2 链接:https://arxiv.org/pdf/2102.12122.pdf 链接:https://arxiv.org/pdf/2106.13797.pdf PVTv2是在PVTv1基础上,所以先介绍PVTv1 Pyramid Vision Transformer: A Versatile Backbone for Dense Prediction…

智能柜+MRO:制造业中的自动售货机

每当谈及企业数字化转型,多数人想到的是人工智能、大数据等高端技术的应用,或是原有业务流程和运营方式的数字化与自动化,实现大幅降本增效等。然而,对于急需在数字时代找到生存之道的企业来说,数字化转型的要求远不止…

技术分享 | Appium 用例录制

下载及安装 下载地址: github.com/appium/appi… 下载对应系统的 Appium 版本,安装完成之后,点击 “Start Server”,就启动了 Appium Server。 在启动成功页面点击右上角的放大镜,进入到创建 Session 页面。配置好…

Vuex状态管理(简单易懂、全网最全)

目录 Vuex是什么? 如何部署 如何使用 state 基础使用 在计算属性属性中使用 使用展开运算符 mutations 基础使用 使用辅助函数(mapMutations)简化 使用常量替代 Mutation 事件类型 getters actions 使用辅助函数(…

Databend 开源周报第 118 期

Databend 是一款现代云数仓。专为弹性和高效设计,为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务:https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展,遇到更贴近你心意的 Databend 。 MERGE INTO 现已…

SpringCloudAlibaba - 项目完整搭建(Nacos + OpenFeign + Getway + Sentinel)

目录 一、SpringCloudAlibaba 项目完整搭建 1.1、初始化项目 1.1.1、创建工程 1.1.2、配置父工程的 pom.xml 1.1.3、创建子模块 1.2、user 微服务 1.2.1、配置 pom.xml 1.2.2、创建 application.yml 配置文件 1.2.3、创建启动类 1.2.4、测试 1.3、product 微服务 1…

[答疑]老大不是某组织的负责人吗,为什么说“系统的老大”?

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 第五元素 2023-10-23 8:38 像这道题 研发部要添加一名C#程序员,由人力资源部负责出面招人,请问针对这名C#程序员(一个人脑系统)&#…