当前位置：首页 > article >正文

Google map根据半径创建虚线边框的圆

article 2025/1/15 23:08:34

google地图创建圆形范围（虚线）

在这里插入图片描述

废话不多说直接上代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>123</title>
    <link rel="stylesheet" href="">
    <style>
        #map {
            width: 100%;
            height: 100vh;
        }   
    </style>
</head>

<body>
   <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxx"></script>
    <script>
        function initialize() {

          var myLatLng = new google.maps.LatLng(-79.33, 36.555);
          var mapOptions = {
            zoom: 14,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };

          var map = new google.maps.Map(document.getElementById("map"), mapOptions);

          var radius = 500;

          var marker = new google.maps.Marker({
            position: myLatLng,
            map: map
          });

          var lineSymbol = {
            path: 'M 0,-1 0,1',
            strokeOpacity: 1,
            scale: 4
          };

          var circlePoly = new google.maps.Polyline({
            path: drawCircle(myLatLng,
              radius / 1609.344, 1),
            strokeOpacity: 0,
            icons: [{
              icon: lineSymbol,
              offset: '0',
              repeat: '20px'
            }],
            strokeWeight: 2,
            strokeColor: 'red',
            fillColor: '#ffcb00',
            fillOpacity: 0.1,
            map: map
          });

          var circle = new google.maps.Circle({
            strokeWeight: 0,
            fillColor: 'yellow',
            fillOpacity: .5,
            map: map,
            center: myLatLng,
            radius: radius
          });
        }

        function drawCircle(point, radius, dir) {
          var d2r = Math.PI / 180; // degrees to radians
          var r2d = 180 / Math.PI; // radians to degrees
          var earthsradius = 3963; // 3963 is the radius of the earth in miles

          var points = 32;

          // find the raidus in lat/lon
          var rlat = (radius / earthsradius) * r2d;
          var rlng = rlat / Math.cos(point.lat() * d2r);

          var extp = new Array();
          if (dir === 1) {
            var start = 0;
            var end = points + 1; // one extra here makes sure we connect the path
          } else {
            var start = points + 1;
            var end = 0;
          }
          for (var i = start;
            (dir === 1 ? i < end : i > end); i = i + dir) {
            var theta = Math.PI * (i / (points / 2));
            ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta)
            ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta)
            extp.push(new google.maps.LatLng(ex, ey));
          }
          return extp;
        }

        window.onload = () => {
            initialize();
        } 
    </script>
</body>

</html>