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();
- });
- }