zoukankan      html  css  js  c++  java
  • H5页面,百度地图点击事件

    需求:用户点击地图的时候获取地址街道,编码等详细信息。

      然后看百度API文档,看到了click事件,关键时候还是需要看文档的。

     

    实现

    这样子虽然在浏览器的手机模拟器下是没有问题的

    但是放在机器上测试的时候就出现问题了,有时候点击不到,我一直以为是我手机的问题,然后我在代码的第一行加上了alert但是发现电脑上没问题,但是手机上不行,我用的是安卓,alert时有时无。然后就百度找了一下,https://www.jianshu.com/p/153cd2471576

    实例:

    var xArr = [];//存放横坐标
    var yArr = [];//存放纵坐标
    //点击事件获取地址信息start------------------------
    //手指触摸屏幕的时候清空两个数组
    map.addEventListener("touchstart", function(e){
    xArr.length = 0;
    yArr.length = 0;
    });
    //如果滑动了屏幕,xArr和yArr将各存入两个坐标值,即始末坐标值
    map.addEventListener("touchmove",function(e){
    xArr.push(e.targetTouches[0].pageX);
    yArr.push(e.targetTouches[0].pageY);
    });
    map.addEventListener('touchend',function(e){
    var far;
    var flag = true;
    //计算平移距离,区分滑动事件和点击事件
    if((xArr.length > 1) && (yArr.length > 1)){
    far = (Math.abs(xArr[0]-xArr[1]))^2 + (Math.abs(yArr[0]-yArr[1]))^2;
    if(far > 0){
    flag = false;
    }
    }
    if(flag){

    map.clearOverlays(); //清除地图上所有覆盖物
    map.centerAndZoom(new BMap.Point(e.point.lng, e.point.lat), 18);
    map.addOverlay(new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat))); //添加标注
    var pt = e.point;
    gc.getLocation(pt, function(rs){
    lon=rs.point.lng;//经度
    lat=rs.point.lat;//纬度
    streetName = rs.addressComponents.street;//获取街道名称
    myValue=rs.address;
    $("#addrId").html(rs.address);//当前位置
    });
    }
    });
    //点击事件获取地址信息end------------------------

    这样就可以解决问题了

  • 相关阅读:
    VSCODE极简配置(备份)
    顺时针打印矩阵--剑指offer
    回文链表 leetcode
    E
    E. Kleofáš and the n-thlon
    单调栈板子
    D
    CodeForces 600E Lomsat gelral(线段树合并)
    C# 面试宝典
    JavaScript 火花效果
  • 原文地址:https://www.cnblogs.com/lkeji388/p/10018658.html
Copyright © 2011-2022 走看看