百度地图标注动画

原创已于 2022-08-22 16:48:14 修改 · 1.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #html

于 2022-08-22 16:44:16 首次发布

javascript 同时被 2 个专栏收录

33 篇文章

订阅专栏

html

7 篇文章

订阅专栏

这篇博客介绍了如何使用百度地图API创建地图实例，设置中心点和缩放级别，并添加自定义图标作为标注。通过JavaScript代码，实现了滚动缩放地图的功能，并且为标注添加了动画效果，包括背景颜色变化和缩放动画。此外，还展示了如何通过CSS实现标注的样式控制。

效果

要在百度地图上实现下列效果，直接开撸
在这里插入图片描述

代码段

  <map id="map" class="map"></map>
  
    let map = new window.BMapGL.Map('map') // 创建地图实例
    let point = new window.BMapGL.Point(this.longitude, this.latitude) // 创建点坐标
    map.centerAndZoom(point, 15)
    map.enableScrollWheelZoom(true)
     // 创建小图标
    let myIcon = new window.BMapGL.Icon(
          'static/map/marker2.png',
          new window.BMapGL.Size(52, 52)
    )
     // 创建Marker标注，使用小图标
     let pt = new window.BMapGL.Point(lon, lat)
     let marker = new window.BMapGL.Marker(pt, {
          icon: myIcon,
      })
      
    map.addEventListener('tilesloaded', function () {
            marker .domElement.className =
              marker .domElement.className + ' mapBGFault'
    })

<style>
 .map :deep() .mapBGFault {
    width: 50px;
    height: 50px;
    background: red;
    border-radius: 25px;
    transform: scale(0);
    animation: myfirst 2s;
    animation-iteration-count: infinite;
  }

  @keyframes myfirst {
    to {
      background: rgba(0, 0, 0, 0);
      transform: scale(2);
    }
  }
</style>