高德地图加载标注并实现缩放动画

最新推荐文章于 2022-11-11 16:26:36 发布

依赖_赖

最新推荐文章于 2022-11-11 16:26:36 发布

阅读量1.2k

点赞数

分类专栏：图表及地图相关文章标签： vue javascript 前端高德地图

本文链接：https://blog.csdn.net/weixin_39150852/article/details/123739439

版权

图表及地图相关专栏收录该内容

26 篇文章 27 订阅

订阅专栏

封装方法

const data = [
        {
          id: '1',
          lng: 103.758778,
          lat: 30.709979,
          degree: 1
        },
        {
          id: '2',
          lng: 103.75889,
          lat: 30.711127,
          degree: 5
        },
        {
          id: '3',
          lng: 103.760967,
          lat: 30.705847,
          degree: 1
        },
        {
          id: '4',
          lng: 103.758579,
          lat: 30.706806,
          degree: 2
        },
        {
          id: '5',
          lng: 103.760996,
          lat: 30.702304,
          degree: 4
        },
        {
          id: '6',
          lng: 103.762626,
          lat: 30.701345,
          degree: 3
        },
        {
          id: '7',
          lng: 103.765606,
          lat: 30.697293,
          degree: 5
        },
        {
          id: '8',
          lng: 103.768606,
          lat: 30.692293,
          degree: 4
        },
        {
          id: '9',
          lng: 103.765606,
          lat: 30.695293,
          degree: 3
        },
        {
          id: '10',
          lng: 103.766606,
          lat: 30.693293,
          degree: 2
        },
        {
          id: '11',
          lng: 103.765606,
          lat: 30.696293,
          degree: 1
        }
      ]
      data.forEach(item => {
        new AMap.Marker({
          map: this.map, //地图对象
          content: `<div class="marker level${item.degree}"><img src="./images/map/level${item.degree}.png" alt=""></div>`, //自定义内容
          position: [item.lng, item.lat], //标记位置
          anchor: 'center' //锚点位置
    	  offset: new AMap.Pixel(0,0), // 设置点标记偏移量
        });
      })

css样式

#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  position: absolute;

  .amap-markers {
    width: 100%;
    height: 100%;

    .marker {
      img {
        width: 100%;
        height: 100%;
      }
    }

    .level1 {
      width: 8px;
      height: 8px;
    }

    .level2 {
      width: 14px;
      height: 14px;
    }

    .level3 {
      width: 20px;
      height: 20px;
      animation: mymove 5s infinite;
    }

    .level4 {
      width: 26px;
      height: 26px;
      animation: mymove 5s infinite;
    }

    .level5 {
      width: 34px;
      height: 34px;
      animation: mymove 5s infinite;
    }

    @keyframes mymove {
      0% {
        transform: scale(1); /*开始为原始大小*/
      }
      25% {
        transform: scale(1.5); /*放大1.5倍*/
      }
      50% {
        transform: scale(1);
      }
      75% {
        transform: scale(1.5);
      }
    }
  }
}