一． 问题描述

  1. 创建地图对象，并添加marker标记，对map和marker均添加了点击事件；
  <body>

    <script>

      function initMap() {

        // 创建地图对象

        const map = new HWMapJsSDK.HWMap(document.getElementById('map'), {

          center: { lat: 39.36322, lng: 116.3214 },

          zoom: 8,

        });

        map.on('click', handleMapClick);

        // 创建标记

        const marker = new HWMapJsSDK.HWMarker({

          map: map,

          position: { lat: 39.36322, lng: 116.3214 },

          draggable: true

        });

        // 给标记添加点击事件

        marker.addListener('click', (e) => {

            console.log('marker mouse click');

        });

      }

      //创建map的点击事件

      function handleMapClick(){

        console.log('map mouse click');

      }

    </script>

  </body>

	```

2.	在测试时发现点击marker标记时同时触发了map的点击事件，具体可以查看下方的Gif图：

![](https://img2023.cnblogs.com/other/2396482/202304/2396482-20230426112341568-722690351.gif)

### 二．	解决方案

1.	经查阅华为地图服务的JavaScript版本的API指导文档发现，华为地图服务有提供un(event, callback)和map.on('click', callback)方法，这两个方法的作用分别是解绑事件监听和添加地图的鼠标左键点击事件。

2.	因为华为地图服务提供了事件监听的解绑方法，所以可以在marker的点击事件方法中先通过un(event, callback)方法解绑map的点击事件，事件解绑之后可以保证在点击marker时不会误触map的点击事件。

3.	当marker的事件监听业务执行完毕之后，可以再通过map.on('click', callback)方法 重新添加map的点击事件

### 三．	代码示例及效果展示

1.	在marker的点击事件方法中先解绑map的点击事件，当marker的点击事件业务执行完毕之后，再重新添加map的点击事件。

<body>
<script>
function initMap() {
// 创建地图对象
const map = new HWMapJsSDK.HWMap(document.getElementById('map'), {
center: { lat: 39.36322, lng: 116.3214 },
zoom: 8,
});
map.on('click', handleMapClick);

    // 创建标记

    const marker = new HWMapJsSDK.HWMarker({

      map: map,

      position: { lat: 39.36322, lng: 116.3214 },

      draggable: true

    });

    // 给标记添加点击事件

    marker.addListener('click', (e) => {

        //解绑map对象的点击事件

        map.un('click', handleMapClick);

        console.log('marker mouse click');

        //添加map对象的点击事件

        map.on('click', handleMapClick);

    });

  }

  function handleMapClick(){

    console.log('map mouse click');

  }

</script>

```

  1. 经下方的Gif图可看出，在点击marker标记时不会再误触map的点击事件。

四． 问题解答

  1. 调用JavaScript版本的的华为地图服务，如何保护API秘钥？

答：具体措施可以查看如下指导文档：如何保护API秘钥？

五． 参考资料

  1. 通过华为地图API for JavaScript创建一个简单的网页地图

  2. 地图事件

  3. HWMap API

  4. 添加marker标记

  5. 标记事件

了解更多详情>>

访问地图服务联盟官网

获取地图服务开发指导文档

访问HMS Core 联盟官网

获取HMS Core 开发指导文档

关注我们，第一时间了解 HMS Core 最新技术资讯~

【FAQ】关于JavaScript版本的华为地图服务Map的点击事件与Marker的点击事件存在冲突的解决方案的更多相关文章

  1. 【FAQ】关于华为地图服务定位存在偏差的原因及解决办法

    一. 问题描述: 华为地图服务"我的位置"能力,在中国大陆地区,向用户展示他们在地图上的当前位置与用户的实际位置存在较大的偏差. 具体差别可以查看下方的图片: 二. 偏差较大的原因 ...

  2. 【HMS Core】集成地图服务不显示地图问题

    ​[问题描述] 关于华为HMS-地图服务不显示地图的问题. 背景:集成华为地图服务运行后页面不显示地图,运行app后不展示地图报错MapsInitializer is not initialized. ...

  3. ArcGIS 10.2之地图服务的发布、使用

    2.发布地图服务 2.1 地图服务器的建立 打开ArcCatalog,在左侧的GIS Servers下,双击Add ArcGIS Server, 弹出添加界面,选择,Administer GIS服务项 ...

  4. 如何用HMS Core位置和地图服务实现附近地点路径规划功能

    日常出行中,路径规划是很重要的部分.用户想要去往某个地点,获取到该地点的所有路径,再根据预估出行时间自行选择合适的路线,极大方便出行.平时生活中也存在大量使用场景,在出行类App中,根据乘客的目的地可 ...

  5. 【FAQ】接入HMS Core地图服务过程中常见问题总结

    HMS Core地图服务(Map Kit)给开发者提供一套地图开发调用的SDK,助力全球开发者实现个性化地图呈现与交互,方便轻松地在应用中集成地图相关的功能,全方位提升用户体验. 在日常工作中,我们会 ...

  6. ArcGIS API for JavaScript 4.3 与ArcGIS Server联动使用【地图服务】

    [前言] 有好些网友问我怎么使用Server发布的地图服务了,其实非常的简单. 我在这里先声明:不提供Server软件,需要的请自行使用互联网搜索资源: 不阐述Server如何发布各各种服务,但是我会 ...

  7. ArcGIS API For Javascript ：如何动态生成 token 加载权限分配的地图服务？

    一.需求 项目中我们通常会遇到为外协团队.合作友商提供地图服务的需求,因此对地图服务的权限需要做出分配. 二.现状 主流的办法是用用户和角色来控制,通常使用代理方式和用户名密码的方式来实现. 三.思路 ...

  8. 用HMS Core地图服务自定义地图样式，给你的应用制作专属个性化地图

    不同行业的开发者对地图样式的展示需求差异很大.例如,物流类应用希望地图样式简洁一些,重点突出城市分布和快递路径:AR游戏类应用中的地图色彩需要和游戏UI适配,做的更酷炫一些:景区导览应用中的地图样式要 ...

  9. SuperMap iClient如何使用WMS地图服务

    什么是WMS服务 WMS(Web Map Service,Web 地图服务)服务,该服务符合 OGC(Open Geospatial Consortium,开放地理信息联盟)制定的 WMS 实现规范. ...

  10. ArcGIS api for javascript——查找任务-在地图上查找要素

    描述 本例展示了如何使用查找任务搜索数据.本例在地图上用图表显示结果并用DojoX的grid格式化结果为表格样式. FindTask构造函数需要一个ArcGIS Server地图服务的URL.本例使用 ...

随机推荐

  1. mybatis-plus自动填充踩坑

    学习使用mybatis-plus的自动填充功能,对create_time和update_time做一个自动填充,期间碰到了一些问题,记录一下问题和相关代码 在实体类字段上增加注解@TableField ...

  2. Linux部分文件管理类命令

    1.创建空文件和刷新时间 touch命令可以用来创建空文件或刷新文件的时间 touch [OPTION]... FILE... 选项: -a 仅改变atime和ctime -m 仅改变mtime和ct ...

  3. Javaweb学习笔记第五弹

    preparedStatement 防止SQL注入:将敏感字符进行转义 1.获取PreparedStatement对象 String sql="selct * from 表名 where 列 ...

  4. CF859E题解

    题意简述 翻译很清楚了 题目解法 如果一个人想去的位置上原来坐着人,那么他要坐到这个位置上,就要把原来的人赶走. 原来的人被赶走了,就只能去想去的位置.如果那个位置上有人,又要把那个人赶走. 我们发现 ...

  5. 【Unity3D】基于粒子系统实现烟花特效

    1 需求实现 ​ 粒子系统ParticleSystem 中介绍了粒子初始化.粒子发射.发射器形状.渲染器.碰撞.子发射器.拖尾等粒子系统的基本用法,本节将基于粒子系统实现烟花特效. ​ 实现需求如下( ...

  6. odoo 开发入门教程系列-安全-简介

    安全-简介 前一章中我们已经创建了第一个打算用于存储业务数据的表.在odoo这样的一个商业应用中,第一个考虑的问题就是谁(Odoo 用户(或者组用户))可以访问数据.odoo为指定用户组用户提供了一个 ...

  7. node-sass与node版本对照图

  8. Vue-router与hash与history区别

    vue-router 基本使用   路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容.Home ...

  9. 云上大数据存储：探究 JuiceFS 与 HDFS 的异同

    HDFS 作为 Hadoop 提供存储组件,已经成为大数据生态里面数据存储最常用的选择,通常在机房环境部署. JuiceFS 是一个基于对象存储的分布式文件系统,用户可以在云上快速地搭建按需扩容的弹性 ...

  10. l洛谷第二题

    题目描述 给定一个 n\times nn×n 的正方形棋盘,几位玩家在上面玩三子棋. 三子棋的规则是每位玩家轮流写下一个字母,同一名玩家的字母相同.当有一名玩家在行.列或者斜线上连续组成了 33 个自 ...