javascript - 点击手势在移动 android chrome 上不起作用
问题描述
我编写了一个简单的“添加 POI”-javascript 地图,但是如何让 Tap-gesture 在 Android 上工作?
HERE-api (JS) 上的点击手势不起作用(使用三星 S10 和 Chrome)。您可以点击十几次才能识别点击。即使使用以下示例也是一个问题: https ://developer.here.com/api-explorer/maps-js/maps/position-on-mouse-click
用鼠标一切正常。使用 Android,您必须多次点击。我的猜测是,如果您的手指在点击时进行了轻微的拖动移动,则会激活 Map Pan 而不是点击。
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-clustering.js"></script>
</head>
<body>
<div id="map"></div>
<script>
var platform = new H.service.Platform({
useCIT: true,
app_id: 'foo',
apikey: 'bar',
useHTTPS: true
});
var defaultLayers = platform.createDefaultLayers();
var map = new H.Map(
document.getElementById('map'),
defaultLayers.vector.normal.map,
{
zoom: 6,
pixelRatio: window.devicePixelRatio || 1
});
map.addEventListener('tap', function (evt) {
alert('tap'); // PROBLEM: only randomly works!
});
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers);
</script>
</body>
</html>
不会引发错误,但点击不会弹出警报。
解决方案
首先,尝试只传递apiKey
而不是传递app_id
给平台服务实例。那么请将您的浏览器更新到最新版本。有关包含tap
事件的完整工作代码,请查看以下更新的代码:
https ://developer.here.com/documentation/examples/maps-js/maps/position-on-mouse-click
推荐阅读
- r - 为什么 ggplot2 在 geom_vline 的彩色线条之上添加黑线?
- c# - 提交表单并重定向后,MVC5 无法使用 ajax 获取 php api
- php - 比较2个数组并在php中回显数组相同内容的值的最佳方法是什么?
- python - Ubuntu 说 Python 是最新版本,但实际上不是。我如何更新它
- algorithm - 如何在有向图中找到彼此距离 k 的所有节点(探索图中的每条边)?
- java - 什么类型的数组(代码)适用于这个问题?
- python - 如何修复错误:“make”不是内部或外部命令、可运行程序或批处理文件
- javascript - Vue.js 将 getter 存储在变量中时会发生奇怪的事情
- php - PHP 用文本“或”转换分号 (;)
- c++ - 代码块中的清单配置在哪里?