百度地图多点标注添加椭圆水波扩散动画效果完整代码 - 地图开发教程 - 常规

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>百度地图多点标注示例</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=G9NGPycxMLGeUDIKd4AeQjDO7SMaCiGi"></script>
    <script type="text/javascript" src="static/admin_img/map/js/infoBox.js"></script>
    <style type="text/css">
        #map {
		position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
       var map = new BMap.Map("map");
	   map.setMapStyle({
		style: 'midnight'
	   });
       var point = new BMap.Point(108.34138, 22.819153); // 设置中心点坐标
       map.centerAndZoom(point, 16); // 设置地图级别
<pre><code>   // 添加多个点标注
   var markers = [
       { point: new BMap.Point(108.361812, 22.819742), content: &quot;这是第一个点&quot; },
       { point: new BMap.Point(108.341304, 22.819313), content: &quot;这是第二个点&quot; },
       { point: new BMap.Point(108.328287, 22.824908), content: &quot;这是第三个点&quot; }
   ];
   
   for (var i = 0; i &lt; markers.length; i++) {
       var marker = new BMap.Marker(markers[i].point);
       map.addOverlay(marker);
   
       // 添加infoBox信息窗
       var infoBox = new BMapLib.InfoBox(map, markers[i].content, {
           boxStyle: {
              width: &quot;200px&quot;,
              height: &quot;100px&quot;,
              border: &quot;1px solid #ccc&quot;,
              borderRadius: &quot;5px&quot;,
              backgroundColor: &quot;#000&quot;,
              padding: &quot;10px&quot;,
              fontSize: &quot;14px&quot;,
              lineHeight: &quot;20px&quot;,
              color: &quot;#fff&quot;,
           },
           closeIconMargin: &quot;10px 2px 0 0&quot;,
           enableAutoPan: true,
           align: INFOBOX_AT_TOP
       });
   
       marker.addEventListener(&quot;click&quot;, function () {
           infoBox.open(this);
       });

       // 添加椭圆
       var circle = new BMap.Circle(markers[i].point, 100, {
           strokeColor: &quot;blue&quot;,
           strokeWeight: 2,
           strokeOpacity: 0.5,
           fillColor: &quot;blue&quot;,
           fillOpacity: 0.2,
       });
       map.addOverlay(circle);

       // 添加水波扩散动画效果
       var wave = new BMap.Circle(markers[i].point, 0, {
           strokeColor: &quot;blue&quot;,
           strokeWeight: 2,
           strokeOpacity: 0.5,
           fillColor: &quot;blue&quot;,
           fillOpacity: 0.2,
       });
       map.addOverlay(wave);
       wave.animate({ radius: 100 }, 2000);

   }
   
   // 启用滚轮缩放
   map.enableScrollWheelZoom(true);

&lt;/script&gt;
</code></pre>
</body>
</html>