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

这篇具有很好参考价值的文章主要介绍了漏刻有时百度地图API实战开发(1)华为手机无法使用addEventListener click 的兼容解决方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

  1. 漏刻有时百度地图API实战开发(1)华为手机无法使用addEventListener click 的兼容解决方案
  2. 漏刻有时百度地图API实战开发(2)文本标签显示和隐藏的切换开关
  3. 漏刻有时百度地图API实战开发(3)自动获取地图多边形中心点坐标
  4. 漏刻有时百度地图API实战开发(4)显示指定区域在移动端异常的解决方案
  5. 漏刻有时百度地图API实战开发(5)区域限制移动端鬼畜抖动的解决方案
  6. 漏刻有时百度地图API实战开发(6)多个标注覆盖层级导致不能响应点击的问题
  7. 漏刻有时百度地图API实战开发(7)JavaScript开源库几何运算判断点是否在多边形内(电子围栏)
  8. 漏刻有时百度地图API实战开发(8)圆形区域周边搜索地图监听事件(覆盖物重叠显示层级\图像标注监听事件、setZIndex和setTop方法)
    漏刻有时百度地图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

@漏刻有时文章来源地址https://www.toymoban.com/news/detail-806418.html

到了这里,关于漏刻有时百度地图API实战开发(1)华为手机无法使用addEventListener click 的兼容解决方案的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 漏刻有时地理信息系统LOCKGIS小程序配置说明(web-view组件、服务器域名配置、复制链接和转发功能)

    漏刻有时地理信息系统说明文档(LOCKGIS、php后台管理、三端一体PC-H5-微信小程序、百度地图jsAPI二次开发、标注弹窗导航) 漏刻有时地理信息系统LOCKGIS小程序配置说明(web-view组件、服务器域名配置、复制链接和转发功能) 漏刻有时地理信息系统LOCKGIS主程序配置说明(地图调起弹

    2024年02月07日
    浏览(54)
  • 如何调用百度地图API

      要调用百度地图API,步骤操作如下 注册并创建一个API密钥。您可以在百度地图API控制台上创建您的密钥。 选择要使用的API服务。百度地图API提供了多种服务,包括地图展示、路线规划、地点搜索、实时交通等。您可以在百度地图API控制台上查看所有可用的服务。 在调用

    2024年02月09日
    浏览(50)
  • 百度地图API的使用

    这篇文章主要想让读者掌握: 百度地图官网 API 百度地图JavaScript API 当前的位置在网页中显示,插入地图 拖拽 点击事件。 应用场景:网页插入百度地图 注意:不关注定位、距离、公交,这些功能一般结合移动端GPS实现 第一步:进入官网 百度地图JavaScript API 直接搜百度地图

    2024年02月14日
    浏览(86)
  • 【QT--使用百度地图API显示地图并绘制路线】

    先吐槽一下下,本身qt学的就不咋滴,谁想到第一件事就是让写一个上位机工具,根据CAN总线传来的位置信息,在地图上去绘制路线,并获取当前路段的限速信息等。当听到这个需求的时候,第一时间是有点懵逼的。自己原本是没接触过这方面的知识,而且qt学的也特别的垃圾

    2024年01月24日
    浏览(49)
  • 百度地图API的使用(附案例)

    百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特性的地图开发。 在控制台里选择创建应用 选择浏览器端,白名单输入* 我们直接把文档内的代码

    2024年02月06日
    浏览(106)
  • 百度地图采集经纬度坐标数据定位的javascript实战开发(地理坐标拾取系统、地址定位点选插件、实时定位、数据导入、地理编码、位置纠偏)

    在百度地图的标注开发中,最为关键的操作就是经纬度坐标信息的拾取。在不同的应用场景,坐标的拾取方式不同。现就常见的地理坐标拾取系统、地址定位点选插件、手机端GPS实时定位、数据导入、地理编码、位置纠偏等做全面的介绍。 传送门:http://api.map.baidu.com/lbsapi/

    2024年02月01日
    浏览(49)
  • 【JavaWeb】百度地图API SDK导入

    百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com) 登录注册,创建应用,获取AK 地理编码 | 百度地图API SDK (baidu.com) 需要的接口一: 获取店铺/用户 所在地址的经纬度坐标 轻量级路线规划 | 百度地图API SDK (baidu.com) 需要的接口二: 通过拿到的起点与终点坐标 进行计算

    2024年04月09日
    浏览(81)
  • 百度地图JavaScript API添加自定义Marker

    官网指导添加自定义Marker 实际使用中发现无法显示图标,找了一些博客 百度地图开发自定义图标无法显示的问题 百度地图自定义图标不显示问题解决方案 关于百度地图开放平台api覆盖物“自定义Marker图标”不能正常显示的解决方案 百度电子地图自定义marker图标 百度地图

    2024年02月07日
    浏览(57)
  • 利用R语言通过百度地图API进行批量地理编码

    当您有大量的地点名称需要在地图上来呈现时,首先要在在线地图上找到该地址的坐标,通常是指经纬度,如果能够用代码来实现,便少了许多费时费力的体力活儿,以下将详细介绍地理编码的详细实现路径,即使您是一个编程小白,只要会打开软件,也可轻松搞定批量地理

    2024年02月11日
    浏览(51)
  • uniapp上高德(百度)地图API的使用(APP安卓)

    前言 由于在app中没有document,window等对象,所以使用在pc端传统方法引入的方式,将会发现无法引用成功,会出现白屏现象。 目前有两种解决方式: 使用uniapp的web-view方式(百度地图) 使用renderjs来调用document等js对象(高德地图) map.vue: 中间实时显示地图上图标的个数,以及

    2023年04月10日
    浏览(94)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包