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

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

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>

http://www.kler.cn/a/373508.html

相关文章:

  • uniapp实现【时间戳转换为日期格式(年-月-日 时-分-秒)】
  • 【推动技术创新】CPU与FPGA/GPU/AI/DSP强强联合的主板定制方案
  • Linux 中,flock 对文件加锁
  • 基于深度学习的舆论分析与检测系统应用与研究
  • MFC工控项目实例二十七添加产品参数
  • Linux系统编程——信号量
  • Vision - 视觉分割开源算法 SAM2(Segment Anything 2) 配置与推理 教程 (1)
  • ValueError: Object arrays cannot be loaded when allow_pickle=False
  • “换行”与“回车”
  • OpenCV 学习笔记
  • 同步和异步
  • AprilTag在相机标定中的应用简介
  • 20 Docker容器集群网络架构:三、Docker集群部署
  • window11使用wsl2安装Ubuntu22.04
  • Linux_04 Linux常用命令——tar
  • 深度学习(九):推荐系统的新引擎(9/10)
  • 【Java并发编程】信号量Semaphore详解
  • docker pull 拉取镜像失败,使用Docker离线包
  • 零基础学西班牙语,柯桥专业小语种培训泓畅学校
  • Si24R05:125K接收2.4G收发SoC芯片规格书
  • CSS行块标签的显示方式
  • 无人机之目标检测算法篇
  • 全自动采集、即时传输:RFID技术为BD数字化装备场尽力!
  • 嵌入式C语言字符串具体实现
  • linux离线安装Ollama并完成大模型配置(无网络)
  • 快速上手 Rust——实用示例