高德地图旋转功能

最新推荐文章于 2024-05-21 22:35:13 发布

锦坤！

最新推荐文章于 2024-05-21 22:35:13 发布

阅读量465

点赞数

文章标签： swift 开发语言 ios

本文链接：https://blog.csdn.net/weixin_44042792/article/details/133163013

版权

1. 高德地图旋转（不可以来回旋转）

<script>
 
export default {
  data() {
    return {
      num: 0,
      numFlag: true,
      map:null,
      mapAnimateControl: false
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = new AMap.Map("map", {
        zoom: 10,
        resizeEnable: true,
 
        pitch:80, // 地图俯仰角度，有效范围 0 度- 83 度
        // center: [116.397428, 39.90923],
        // layers: [new AMap.TileLayer.Satellite()],
        viewMode: '3D',
        lang: "zh_cn",
 
      });
      let currentCenter = this.map.getCenter();
      this.map.setCenter(currentCenter);
        //开启调用
      this.mapAnimateControl = true
      this.rotate()
    },
    //定义动画
    rotate() {
      window.requestAnimationFrame(()=>{
        if(this.mapAnimateControl==true){
          // 360 是旋转角度
          this.map.setRotation((this.map.getRotation()+0.02)%360);
        }
        this.rotate()
      })
    }
  },
};
</script>

2. 自己改变的（可以来回旋转）

rotate() {
      window.requestAnimationFrame(() => {
        if (this.mapAnimateControl == true) {
          if (this.numFlag) {
            // 每次旋转0.2
            this.num += 0.2;
            // 最大旋转角度是30度，超过30向回旋转
            if (this.num >= 30) {
              this.numFlag = false;
            }
          } else {
            this.num -= 0.2;
            if (this.num <= 0) {
              this.numFlag = true;
            }
          }
          // this.aMap.setRotation((this.aMap.getRotation()+0.2)%30);
          this.aMap.setRotation(this.num);
        }
        this.rotate();
      });
    }