js实现类似百度地图的缩放拖动功能

最新推荐文章于 2024-06-27 16:14:54 发布

叶一叶知秋

最新推荐文章于 2024-06-27 16:14:54 发布

阅读量2.7k

点赞数 1

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_45041180/article/details/103871167

版权

本文介绍了如何在Vue.js框架下利用canvas实现类似百度地图的缩放和拖动功能。通过监听滚轮事件和拖动事件，结合canvas的缩放绘制和外层div的滚动条控制，实现地图的交互操作。在实际应用中遇到的不流畅问题，作者通过优化算法逻辑，提高了用户体验。

摘要由CSDN通过智能技术生成

js实现类似百度地图的缩放拖动功能

使用的前端框架为vue

采用vue的框架,通过canvas的缩放绘制和外层div的滚动条控制实现功能

滚轮事件代码

    handleScroll(e) {
      console.log(e.deltaY)

      let _this = this
      if (e.deltaY > 0 && _this.zoomtimes > 1) {
        _this.zoomtimes = (_this.zoomtimes * 10 - 2) / 10
      } else if (e.deltaY < 0) {
        _this.zoomtimes = (_this.zoomtimes * 10 + 2) / 10
      }
      this.down_x = e.clientX
      this.down_y = e.clientY
      if (e.deltaY > 0) {
        _this.direction = 1
      } else {
        _this.direction = 0
      }
      e.preventDefault()
    },

 wheelxy() {
      let _this = this
      if (_this.direction == 0) {
        _this.$store.state.scroll_x = _this.$refs.imageWrapper.scrollLeft =
          (((_this.$refs.imageWrapper.clientWidth - 10) * _this.zoomtimes) /
            ((_this.$refs.imageWrapper.clientWidth - 10) *
              (_this.zoomtimes - 0.2)) -
            1) *
            (_this.down_x - 67 + _this.$refs.imageWrapper.scrollLeft) +
          _this.$refs.imageWrapper.scrollLeft
        _this.$store.state.scroll_y = _this.$refs.imageWrapper.scrollTop =
          (((_this.$refs.imageWrapper.clientHeight - 10) * _this.zoomtimes) /
            ((_this.$refs.imageWrapper.clientHeight - 10) *
              (_this.zoomtimes -