在 Google Maps Java 上制作动画地图圈答案

【问题标题】：Making an animated map circle on Google Maps Java在 Google Maps Java 上制作动画地图圈
【发布时间】：2022-12-11 11:05:13
【问题描述】：

我想在地图上制作雷达屏幕动画。我想我会用来做这个的概念是让雷达圆和从圆心到边缘的多段线被删除然后添加外坐标围绕圆的边缘稍微移动，与每次线被移除并重新渲染时，轴承都会增加，这将使它看起来像是绕着圆圈的边缘移动。我该怎么做呢？

我试过制作一个“radareffect”类，但我在 Java 方面不是很有经验，所以我可以使用一些指导。我感谢任何花时间回应的人。

【问题讨论】：

它必须是Java吗？ HTML5 会是更好的选择吗？
How to create the radar animation at the center of Google Map? 的可能重复项
你想做这样的事情吗（HTML/JavaScript）：fiddle
@geocodezip 是的！确切地！

标签： java google-maps

【解决方案1】：

在 HTML/Javascript 中（使用 Google Maps JavaScript API v3）：

  marker1 = new google.maps.Marker({
    map,
    draggable: true,
    position: { lat: 40.714, lng: -74.006 },
  });
  var radius = 100000; // radius of circle/length of line
  var circle = new google.maps.Circle({
    center: marker1.getPosition(),
    radius: radius,
    strokeOpacity: 0.25,
    map: map
  });
  var angle = 0;
  var line;
  map.fitBounds(circle.getBounds());
  setInterval(function() {
     // sweep the line a 1 degree increments at a 50 ms rate
     angle++;
     if (!!line) line.setMap(null);
     line = new google.maps.Polyline({
       path: [marker1.getPosition(),
         google.maps.geometry.spherical.computeOffset(marker1.getPosition(), radius, angle)],
         strokeOpacity: 0.25,
         map: map
     })
  }, 50)
}

proof of concept fiddle

代码SN-P：

let marker1, marker2;
let poly, geodesicPoly;

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: 34, lng: -40.605 },
  });

  marker1 = new google.maps.Marker({
    map,
    draggable: true,
    position: { lat: 40.714, lng: -74.006 },
  });
  var radius = 100000;
  var circle = new google.maps.Circle({
    center: marker1.getPosition(),
    radius: radius,
    strokeOpacity: 0.25,
    map: map
  });
  var angle = 0;
  var line;
  map.fitBounds(circle.getBounds());
  setInterval(function() {
     angle++;
     if (!!line) line.setMap(null);
     line = new google.maps.Polyline({
       path: [marker1.getPosition(),
         google.maps.geometry.spherical.computeOffset(marker1.getPosition(), radius, angle)],
         strokeOpacity: 0.25,
         map: map
     })
  }, 50)
}

window.initMap = initMap;

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Navigation Functions (Heading)</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>

    <!-- 
     The `defer` attribute causes the callback to execute after the full HTML
     document has been parsed. For non-blocking uses, avoiding race conditions,
     and consistent behavior across browsers, consider loading using Promises
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=geometry&v=weekly"
      defer
    ></script>
  </body>
</html>

【讨论】：