百度地图标注动画

小巷陌影

已于 2022-08-22 16:48:14 修改

阅读量1.5k

点赞数 2

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

本文链接：https://blog.csdn.net/xiaoyanli8077/article/details/126468974

版权

javascript 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

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

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

效果

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

代码段

  <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>