Problema: Use o elemento adicionado dinamicamente por js e vincule o evento click ao elemento.Tudo é acionado normalmente no lado do PC, mas o método não pode ser acionado no lado móvel.
Motivo: no lado móvel, você precisa prestar atenção ao usar o evento touch em vez do evento click do mouse ao vincular o evento click.
Os eventos de toque comumente usados são: - touchstart: acionado quando o dedo toca a tela
- touchmove: acionado continuamente quando o dedo desliza na tela
- touchend: acionado quando o dedo sai da tela- Evite usar o evento de clique, que é projetado para o mouse
- Para dispositivos com tela sensível ao toque, é necessário distinguir os eventos de toque de diferentes dedos
- Você pode vincular eventos de toque e clique ao mesmo tempo para obter compatibilidade entre celular e PC
// 方法一:通过addEventListener绑定
element.addEventListener('touchstart', function(){
//点击处理
}, false);
// 方法二:直接内联绑定
<div ontouchstart="touch(event)"></div>
function touch(event) {
// 点击处理
}
A solução que o DomMarker adicionou dinamicamente ao mapa interno do Hummingbird View não pode ser acionada clicando no terminal móvel
// 显示选择起点终点的选项卡
function showDomMarker(position) {
if (domMarker) {
domMarker.remove();
domMarker = null;
}
domMarker = new fengmap.FMDomMarker({
x: position.x,
y: position.y,
domHeight: 80,
domWidth: 200,
anchor: fengmap.FMMarkerAnchor.BOTTOM,
content: `<div style=" display: inline-block; width: 200px; text-align: center;">
<div style="display: flex;margin-bottom: 10px; border-radius: 6px; background-color: white; text-align: center;">
<span id="clickStart" style="flex: 1; height: 30px; color: white;padding: 10px 16px; line-height: 30px; background-color: #2F65EE; border-bottom-left-radius: 6px; border-top-left-radius:6px; " onclick=setStart() ontouchstart=setStart()>作为起点</span>
<span style="flex: 1; height: 30px; padding: 10px 16px; line-height: 30px;" onclick=setEnd() ontouchstart=setEnd()>作为终点</span>
</div>
<div style="background-image: url('https://developer.fengmap.com/fmAPI/images/navi/marker.png');display: inline-block; width: 32px; height: 32px;background-size:100%;"></div>
</div>`,
});
var level = position.level;
var floor = map.getFloor(level);
domMarker.addTo(floor);
}