ipad 百度地图api触摸事件

妄梦久挽
于 2023-07-25 08:43:38 发布
阅读量250
点赞数
文章标签： ipad 百度 ios
本文链接：https://blog.csdn.net/weixin_53185230/article/details/131909506
版权
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Hello, World</title>
  <style type="text/css">
    body {
      height: 1280px;
      width: 1200px;
    }
    #container {
      width: 100%;
      height: 100%;
    }
  </style>

  <script type="text/javascript" src="../jquery/jquery-1.9.1.min.js"></script>
  <!-- 引入jQuery -->
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=6fK6xbGieXEABUXxyoKAQOV6ivR66NKw"></script>
</head>

<body>
  <div id="container">
    <button id="btnStart" style="color: red">开始</button>
    <div id="ddd">dddd</div>
  </div>
  <script type="text/javascript">
    var map = new BMap.Map("container");
    // // 创建地图实例102.14151999598859,26.89974448716115
    var point = new BMap.Point(125.34060208, 43.9219535);
    // // 创建点坐标
    map.centerAndZoom(point, 14);
    map.enableScrollWheelZoom();
    map.disablePinchToZoom(false);


    // 绑定事件，点击一次放大两级    
    document.getElementById("container").onclick = function(e){  
        map.zoomTo(map.getZoom() + 2);    
    }  
    //添加自定义的覆盖物
    function ZoomControl_Center() {
      this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
      this.defaultOffset = new BMap.Size(20, 10);
    }
    ZoomControl_Center.prototype = new BMap.Control();
    ZoomControl_Center.prototype.initialize = function (map) {
      var div = document.createElement("div");
      //<img src='images/profle.png' width='32px' height='32px'>
      div.innerHTML = "<button>进度</button>";
      div.style.cursor = "pointer";
      div.onclick = function () {
        //添加响应事件
        // var x = document.getElementById("userInfoDiv");
        if ($("#userInfoDiv").css("display") == "none") {
          //如果是隐藏的
          $("#userInfoDiv").css("display", "block"); //display属性设置为block（显示）
        } else {
          $("#userInfoDiv").css("display", "none");
        }
      };
      map.getContainer().appendChild(div);
      return div;
    };

    map.addControl(new ZoomControl_Center());
    openUserInfoDiv();
    //内容样式
    function openUserInfoDiv() {
      var newDiv = document.createElement("div");
      newDiv.id = "userInfoDiv";
      newDiv.style.position = "absolute";
      newDiv.style.zIndex = "9999";
      newDiv.style.width = "350px";
      newDiv.style.top = "50px";
      newDiv.style.right = "100px";
      newDiv.style.backgroundColor = "rgba(194,124,136)";
      newDiv.style.opacity = "0.6";
      newDiv.style.padding = "5px";
      newDiv.style.display = "none";
      var routeName = "测试路线";
      var empName = "张三";
      var HTMLstr =
        "<div style='background:#1868bd;color:#fff; '>" +
        "<span style='margin:10px;padding:0.2em 0;line-height:1.5;font-size:15px'><b>" +
        routeName +
        "</b></span></div>" +
        "<ul style='margin:0px;padding:15px;line-height:1.2; list-style: none;'>" +
        "<li style='color:#fff;'><font size='1.5'><b>11111111111方法反反复复：" +
        empName +
        "</b></font></li>" +
        "<li><font size='1.5'><b>11111111111：" +
        empName +
        "</b></font></li>" +
        "<li><font size='1.5'><b>11111111111：" +
        empName +
        "</b></font></li>" +
        "<li><font size='1.5'><b>11111111111：" +
        empName +
        "</b></font></li>" +
        "<li><font size='1.5'><b>11111111111：" +
        empName +
        "</b></font></li>" +
        "<li><font size='1.5'><b>11111111111：" +
        empName +
        "</b></font></li>" +
        "</ul>";
      newDiv.innerHTML = HTMLstr;
      document.getElementById("container").appendChild(newDiv);
    }


    // var geolocation = new BMap.Geolocation();
    // geolocation.getCurrentPosition(function (r) {
    //   // 定位成功事件
    //   if (this.getStatus() == BMAP_STATUS_SUCCESS) {
    //     //alert('您的位置：'+r.point.lng+','+r.point.lat);
    //     var point = new BMap.Point(r.point.lng, +r.point.lat);
    //   }
    // }, { enableHighAccuracy: true })

    // map.addEventListener("click", function (e) {
    //   prompt("鼠标单击地方的经纬度为：", e.point.lng + "," + e.point.lat);
    // });

    //绘制箭头及其样式
    // var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
    //             scale: 0.6,//图标缩放大小
    //             strokeColor:'#fff',//设置矢量图标的线填充颜色
    //             strokeWeight: 2,//设置线宽
    //         });
    //         var icons = new BMap.IconSequence(sy, '100%', '10%',false);//设置为true，可以对轨迹进行编辑
    //         //绘制折线以及样式
    //         var trackLine = new BMap.Polyline(potArr,{
    //             strokeColor:"#18a45b",//设置颜色
    //             strokeWeight:8 ,//宽度
    //             strokeOpacity:0.8,//折线的透明度，取值范围0 - 1
    //             enableEditing: false,//是否启用线编辑，默认为false
    //             enableClicking: false,//是否响应点击事件，默认为true
    //             icons:[icons]
    //         });
    //         map.addOverlay(trackLine);

    // 106.91057538955214,39.40006902544557





    var mapDom = document.getElementById('container');
    _offsetHeight = mapDom.offsetHeight;
    _offsetWidth = mapDom.offsetWidth;
    let _touchPoint, _touchStartDistance, _isPinch, _touchEndDistance;

    document.getElementById("container").addEventListener("touchstart", function (e) {
      e.preventDefault();
      if (e.touches.length == 1) {
        _touchPoint = {
          x: e.touches[0].pageX,
          y: e.touches[0].pageY
        };
      } else if (e.touches.length == 2) {
        let xDistance = e.touches[0].pageX - e.touches[1].pageX;
        let yDistance = e.touches[0].pageY - e.touches[1].pageY;
        _touchStartDistance = Math.abs(Math.pow((xDistance * xDistance + yDistance * yDistance), 0.5));
      }
    });
    document.getElementById("container").addEventListener("touchmove", function (e) {
      e.preventDefault();
      console.log(e.touches.length);
      if (e.touches.length == 1) {
        if (!_touchPoint) return;
        var dx = e.touches[0].pageX - _touchPoint.x;
        var dy = e.touches[0].pageY - _touchPoint.y;
        map.panBy(dx, dy, {
          noAnimation: true
        });
        _touchPoint.x = e.touches[0].pageX;
        _touchPoint.y = e.touches[0].pageY;
      }
      else if (e.touches.length == 2) {
        _isPinch = true;
        let xDistance = e.touches[0].pageX - e.touches[1].pageX;
        let yDistance = e.touches[0].pageY - e.touches[1].pageY;
        _touchEndDistance = Math.abs(Math.pow((xDistance * xDistance + yDistance * yDistance), 0.5));
      }
    });
    document.getElementById("container").addEventListener("touchend", function (e) {
      e.preventDefault();
      if (_isPinch) {
        if (_touchEndDistance > _touchStartDistance && Math.abs(_touchEndDistance - _touchStartDistance) > 50) {
          map.zoomIn();
        } else if (_touchEndDistance < _touchStartDistance && Math.abs(_touchEndDistance - _touchStartDistance) > 50) {
          map.zoomOut();
        }
        _touchEndDistance = 0;
        _isPinch = false;
      }
      _touchPoint = null;
    });

  </script>
</body>

</html>