使用CSS3设计地图上的雷达定位提示效果

使用CSS3设计地图上的雷达定位提示效果，需要按照以下步骤进行：

1. 确定雷达图标样式

首先，需要确定雷达定位图标的样式。这个样式可以自己设计，也可以在网上寻找免费的雷达图标下载。可以选择SVG格式的图标，因为SVG支持CSS3的transform属性，可以用于实现旋转和缩放等效果。

<!-- 需要添加SVG图标的HTML代码 -->
<svg viewBox="0 0 32 32" class="radar-icon">
  <g fill="#fff">
    <path d="M16,4.183c-1.498,0-2.77,0.828-3.455,2.041C11.23,6.348,10.531,6,9.804,6C8.349,6,7,7.338,7,8.845
      c0,2.225,1.682,4.14,3.907,4.413v0.742h2.1v-0.742c2.226-0.273,3.906-2.188,3.906-4.413c0-1.507-1.348-2.845-2.804-2.845
      c-0.727,0-1.425,0.347-2.74,1.224C18.77,5.011,17.497,4.183,16,4.183z M16,11.764v2.369h-2.1v-2.369
      c-1.428-0.199-2.516-1.324-2.516-2.669c0-1.478,1.196-2.675,2.675-2.675c0.698,0,1.288,0.328,2.514,1.444
      C17.292,8.131,16.304,9.313,16,11.764z"/>
    <path d="M16,0C11.385,0,7.165,2.505,4.545,6.212c-2.289,3.169-3.12,7.403-2.313,12.329C2.448,22.621,3,23.853,3,25
      c0,1.93-1.57,3.5-3.5,3.5S0,26.93,0,25c0-1.147,0.552-2.379,1.767-3.459c0.806-4.926-0.021-9.16-2.31-12.329
      C0.175,2.505-3.045,0-7.545,0C-10,0-12,1.94-12,4.35c0,0.778,0.285,1.498,0.76,2.191C-14.996,7.352-16,9.448-16,11.764
      c0,3.492,2.851,6.333,6.333,6.333c0.355,0,0.705-0.03,1.05-0.088c0.069,0.347,0.17,0.686,0.3,1.017
      c-0.539,0.186-1.111,0.288-1.35,0.312c-0.24,0.023-1.181,0.108-2.517,0.108c-6.423,0-9.506-2.967-7.488-7.161
      C-14.95,4.147-14.233,3.012-13.28,2.042C-12.696,1.479-12.337,1-12,0C-12.696,1.478-13.663,2.759-14.937,3.458
      c-0.285-0.077-0.57-0.158-0.853-0.252C-18.799,2.22-20,4.412-20,6.926C-20,9.844-17.897,12-15,12
      c0.195,0,0.391-0.016,0.586-0.045c-0.166,0.266-0.332,0.528-0.497,0.784c-0.754,1.142-1.54,2.327-2.302,3.599
      c-0.36,0.583-0.726,1.202-1.071,1.845C-17.562,20.523-18,22.36-18,24.332C-18,28.416-14.416,32-10.332,32
      c1.807,0,3.499-0.706,4.765-1.99c0.146-0.146,0.287-0.299,0.427-0.455l3.541,3.541c0.293,0.293,0.768,0.293,1.061,0
      l0,0c0.293-0.293,0.293-0.768,0-1.061l-3.486-3.484C13.688,25.302,15,23.888,15,21.966c0-0.354-0.034-0.704-0.093-1.045
      c0.393,0.033,0.794,0.05,1.203,0.05c5.251,0,8.658-3.465,8.658-8.044C32,5.36,25.482,0,16,0z M6.333,4.35
      C6.333,2.103,9.139,0,12.333,0c3.195,0,6,2.103,6,4.35c0,2.307-2.805,4.167-6,4.167C9.139,8.517,6.333,6.657,6.333,4.35z"/>
    <path d="M16,10.221c-2.373,0-4.308,1.935-4.308,4.308c0,2.372,1.935,4.307,4.308,4.307c2.372,0,4.307-1.935,4.307-4.307
      C20.307,12.156,18.372,10.221,16,10.221z M16,17.834c-1.31,0-2.376-1.065-2.376-2.376c0-1.31,1.066-2.376,2.376-2.376
      c1.311,0,2.376,1.066,2.376,2.376C18.376,16.77,17.311,17.834,16,17.834z"/>
    <animateTransform 
      attributeType="xml"
      attributeName="transform" 
      type="rotate"
      by="360" 
      origin="16 16" 
      dur="2s"
      repeatCount="indefinite"/>
  </g>
</svg>

2. 设计雷达扫描效果

接下来，需要设计雷达扫描效果。我们可以使用CSS3中的动画和过渡来实现这个效果。具体来说，可以使用CSS3的transform属性实现旋转效果，并加上延迟，使得旋转的起始位置不同。同时，可以使用CSS3的transition属性实现颜色渐变效果。

/* 雷达扫描效果的CSS样式 */
.radar {
  background-color: rgba(0, 120, 255, 0.3);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: all .5s cubic-bezier(0.46, 0.03, 0.52, 0.98);
}

.radar:before,
.radar:after {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  bottom: -20px;
  left: -20px;
  background-color: inherit;
  border-radius: inherit;
  opacity: 0;
  transition: all .5s ease;
}

.radar:before {
  filter: blur(60px);
}

.radar:after {
  filter: blur(80px);
}

.radar.active {
  transform: translate(-50%, -50%) scale(1);
}

.radar.active:before,
.radar.active:after {
  opacity: 1;
}
.radar.active:before {
  transition-delay: 0.2s;
}

.radar.active:after {
  transition-delay: 0.5s;
}

.radar.active .line {
  background-color: rgba(0, 120, 255, 0.7);
}

.radar.active .line:before {
  transition-delay: 0.5s;
}

.radar.active .line:after {
  transition-delay: 0.8s;
}

.radar.active .line:before,
.radar.active .line:after {
  opacity: 1;
}

.radar.active .line .dot {
  transform: translate(-50%, -50%) scale(1);
}

.radar.active .line .dot:before,
.radar.active .line .dot:after {
  transform: scale(1);
}

.radar.active .line .dot:before {
  transition-delay: 0.8s;
}

.radar.active .line .dot:after {
  transition-delay: 1.1s;
}