【FAQ】关于JavaScript版本的华为地图服务Map的点击事件与Marker的点击事件存在冲突的解决方案
一． 问题描述
- 创建地图对象，并添加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图：
### 二． 解决方案
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>
```
- 经下方的Gif图可看出，在点击marker标记时不会再误触map的点击事件。
四． 问题解答
- 调用JavaScript版本的的华为地图服务，如何保护API秘钥？
答：具体措施可以查看如下指导文档：如何保护API秘钥？
五． 参考资料
了解更多详情>>
访问地图服务联盟官网
关注我们，第一时间了解 HMS Core 最新技术资讯~
【FAQ】关于JavaScript版本的华为地图服务Map的点击事件与Marker的点击事件存在冲突的解决方案的更多相关文章
- 【FAQ】关于华为地图服务定位存在偏差的原因及解决办法
一. 问题描述: 华为地图服务"我的位置"能力,在中国大陆地区,向用户展示他们在地图上的当前位置与用户的实际位置存在较大的偏差. 具体差别可以查看下方的图片: 二. 偏差较大的原因 ...
- 【HMS Core】集成地图服务不显示地图问题
[问题描述] 关于华为HMS-地图服务不显示地图的问题. 背景:集成华为地图服务运行后页面不显示地图,运行app后不展示地图报错MapsInitializer is not initialized. ...
- ArcGIS 10.2之地图服务的发布、使用
2.发布地图服务 2.1 地图服务器的建立 打开ArcCatalog,在左侧的GIS Servers下,双击Add ArcGIS Server, 弹出添加界面,选择,Administer GIS服务项 ...
- 如何用HMS Core位置和地图服务实现附近地点路径规划功能
日常出行中,路径规划是很重要的部分.用户想要去往某个地点,获取到该地点的所有路径,再根据预估出行时间自行选择合适的路线,极大方便出行.平时生活中也存在大量使用场景,在出行类App中,根据乘客的目的地可 ...
- 【FAQ】接入HMS Core地图服务过程中常见问题总结
HMS Core地图服务(Map Kit)给开发者提供一套地图开发调用的SDK,助力全球开发者实现个性化地图呈现与交互,方便轻松地在应用中集成地图相关的功能,全方位提升用户体验. 在日常工作中,我们会 ...
- ArcGIS API for JavaScript 4.3 与ArcGIS Server联动使用【地图服务】
[前言] 有好些网友问我怎么使用Server发布的地图服务了,其实非常的简单. 我在这里先声明:不提供Server软件,需要的请自行使用互联网搜索资源: 不阐述Server如何发布各各种服务,但是我会 ...
- ArcGIS API For Javascript ：如何动态生成 token 加载权限分配的地图服务？
一.需求 项目中我们通常会遇到为外协团队.合作友商提供地图服务的需求,因此对地图服务的权限需要做出分配. 二.现状 主流的办法是用用户和角色来控制,通常使用代理方式和用户名密码的方式来实现. 三.思路 ...
- 用HMS Core地图服务自定义地图样式，给你的应用制作专属个性化地图
不同行业的开发者对地图样式的展示需求差异很大.例如,物流类应用希望地图样式简洁一些,重点突出城市分布和快递路径:AR游戏类应用中的地图色彩需要和游戏UI适配,做的更酷炫一些:景区导览应用中的地图样式要 ...
- SuperMap iClient如何使用WMS地图服务
什么是WMS服务 WMS(Web Map Service,Web 地图服务)服务,该服务符合 OGC(Open Geospatial Consortium,开放地理信息联盟)制定的 WMS 实现规范. ...
- ArcGIS api for javascript——查找任务-在地图上查找要素
描述 本例展示了如何使用查找任务搜索数据.本例在地图上用图表显示结果并用DojoX的grid格式化结果为表格样式. FindTask构造函数需要一个ArcGIS Server地图服务的URL.本例使用 ...
随机推荐
- 中兴radius属性列表new.xls
标准属性 自定义属性
- 几种C#实现播放声音的方法 DirectX、SoundPlayer等
第一种是利用DirectX 1.安装了DirectX SDK(有9个DLL文件).这里我们只用到MicroSoft.DirectX.dll 和 Microsoft.Directx.DirectSou ...
- Windows Oracle 启动OracleDBConsoleorcl 服务时报 Window不能在 本地计算机启动 OracleDBConsoleorcl 。有关更多信息，查阅系统事件日志。如果这是非Microsoft服务，请与服务厂商联系，并参考特定服务错误代码 2 。
一.报错信息如图 二.原因分析: 计算机主机名或IP地址有变化 三.解决方法 依次输入命令: Microsoft Windows [版本 10.0.22000.795](c) Microsoft Co ...
- ASP.NET Core Web API 接口限流
前言 ASP.NET Core Web API 接口限流.限制接口并发数量,我也不知道自己写的有没有问题,抛砖引玉.欢迎来喷! 需求 写了一个接口,参数可以传多个人员,也可以传单个人员,时间范围限制最 ...
- 人人皆可虚拟，直播还能这么玩？声网推出 MetaLive 元直播解决方案
视频群聊.在线社交.电商带货.游戏竞技.......越来越多的场景融入了直播这一功能.无可厚非,直播可以拉近人与人间的距离,让彼此间的交流更具象.但传统直播场景更为强调主播个人的表现,用户多以围观.刷 ...
- BootstrapBlazor + FreeSql ORM 实战 Table 表格组件维护多表数据 - OneToOne
OneToOne 垂直扩展表字段是很常见的方法, 主表存商品资料, 分表存每个客户对应商品的备注和个性化的价格等等, 本文使用Blazor一步步实现这个简单的需求. 1. 基于实战 10分钟编写数据库 ...
- window的子对象
在控制台输入 history history.length 历史记录个数history.back() 后退history.forward() 前进history.go(n) 跳到某一页,可正可负,当n ...
- CISCN2021东北赛区-Maple_root-WriteUp
参赛队员: x0r,b477eRy,f1oat 总结 最终成绩:3627 最终排名:13 一血数量:3 本次比赛前期一切顺利,后期感觉被py爆了,结果名次就拉了下来,整体题目全部都偏向MISC,打的很 ...
- Excel的读取保存案例
python进行excel处理 1. Excel读取 # 首先导入pandas工具包 import pandas as pd # 读取Excel df = pd.read_excel('./excel ...
- docker中跑MySQL
mkdir xxx 创建一个目录 cd xxx 进入该目录 运行: sudo docker run -p 3306:3306 --name mymysql \ --restart=always -v ...