高德地图雷达波水纹波--- # 主题列表：juejin, github, smartblue, cyanosis, c

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script
        src="https://webapi.amap.com/maps?v=1.4.15&key=你的key"></script>

    <style>
        html,
        body {
            height: 100%;
        }

        #mapcontainer {
            width: 100%;
            height: 100%;
        }
    </style>

</head>

<body>
    <div id="mapcontainer"></div>
    <script>
        let circleRadius0 = 100,
            circleRadius1 = 100,
            circleRadius2 = 100,
            op0 = 0.5,
            op1 = 0.5,
            op2 = 0.5,
            circleMarker0 = null,
            circleMarker1 = null,
            circleMarker2 = null,
            stop0 = null,
            stop1 = null,
            stop2 = null,
            map = new AMap.Map('mapcontainer', {
                resizeEnable: true,
                zoom: 13
            });

        let circle2 = () => {
            stop2 = requestAnimationFrame(circle2);
            circleRadius2 = circleRadius2 + 2;
            op2 = (400 - circleRadius2) / 400;
            if (circleRadius2 === 200) {

            }
            if (circleRadius2 > 400) {
                circleRadius2 = 100;
                op2 = 0.5;
                cancelAnimationFrame(stop2);
            }
            circleMarker2.setRadius(circleRadius2);
            circleMarker2.setOptions({ fillOpacity: op2, strokeOpacity: op2 })

        }

        let circle1 = () => {
            stop1 = requestAnimationFrame(circle1);
            circleRadius1 = circleRadius1 + 2;
            op1 = (400 - circleRadius1) / 400;
            if (circleRadius1 === 200) {
                stop2 = requestAnimationFrame(circle2);
            }
            if (circleRadius1 > 400) {
                circleRadius1 = 100;
                op1 = 0.5;
                cancelAnimationFrame(stop1);
            }
            circleMarker1.setRadius(circleRadius1);
            circleMarker1.setOptions({ fillOpacity: op1, strokeOpacity: op1 });
        }
        let circle0 = () => {
            stop0 = requestAnimationFrame(circle0);
            circleRadius0 = circleRadius0 + 2;
            op0 = (400 - circleRadius0) / 400;
            if (circleRadius0 === 200) {
                stop1 = requestAnimationFrame(circle1);
            }
            if (circleRadius0 > 400) {
                circleRadius0 = 100;
                op0 = 0.5;
            }
            circleMarker0.setRadius(circleRadius0);
            circleMarker0.setOptions({ fillOpacity: op0, strokeOpacity: op0 });

        }

        let circleMarker = (longitude, latitude) => new AMap.Circle({
            center: [longitude, latitude],
            radius: 0,
            strokeColor: '#53b7fa',
            strokeWeight: 1,
            strokeOpacity: 0.5,
            fillColor: '#53b7fa',
            fillOpacity: 0.7,
            zIndex: 10,
        });


        AMap.plugin('AMap.Geolocation', () => {
            let geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,
                timeout: 10000
            });
            geolocation.getCurrentPosition((status, result) => {
                if (status == 'complete') {
                    console.log(result.position.lat, result.position.lng)
                    let longitude = result.position.lng
                    let latitude = result.position.lat

                    circleMarker0 = circleMarker(longitude, latitude)
                    circleMarker1 = circleMarker(longitude, latitude)
                    circleMarker2 = circleMarker(longitude, latitude)

                    circleMarker0.setMap(map);
                    circleMarker1.setMap(map);
                    circleMarker2.setMap(map);

                    let markerCenter = new AMap.Marker({
                        position: [longitude, latitude],
                    });

                    map.add([markerCenter]);
                    map.setFitView();

                    stop0 = requestAnimationFrame(circle0);
                } else {
                    console.log(result.message)
                }
            });
        });
    </script>
</body>

</html>
高德地图雷达波 水纹波

高德地图雷达波水纹波
