如何防止在圆圈中心发生变化时创建新圆圈。（谷歌地图 API）答案

【问题标题】：How to prevent new circles to be created whenever the circle's center changes. (Google Maps API)如何防止在圆圈中心发生变化时创建新圆圈。（谷歌地图 API）
【发布时间】：2019-11-20 10:14:09
【问题描述】：

我正在创建一个网络应用程序，该应用程序显示离用户当前位置最近的位置和要走的路线。问题是我正在使用一个简单的圆圈动画来显示地图中的用户位置，并且每次用户的位置发生变化时，它都会创建一个新的圆圈。

    var circle;
    var smallCircle;

    function getLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.watchPosition(showPosition);
      } else {
        alert("Sorry the geolocation failed");
      }
    }

    function showPosition(position) {
        const pos =
        {
       lat: position.coords.latitude,
       lng: position.coords.longitude
        };
       console.log(pos);
       locationMarker(pos);
    }

    function locationMarker(user){

     if (smallCircle != null & circle != null) {


          circle.setCenter(user);
          smallCircle.setCenter(user);
          map.panTo(user);

        } else {

          smallCircle = new google.maps.Circle({
             center: user,
             radius: 5,
             strokeColor: "#1abc9c",
             strokeOpacity: 1,
             strokeWeight: 1,
             fillColor: "#1abc9c",
             fillOpacity: 0.5
          });

          circle = new google.maps.Circle({
             center: user,
             radius: 20,
             strokeColor: "#1abc9c",
             strokeOpacity: 1,
             strokeWeight: 1,
             fillColor: "#1abc9c",
             fillOpacity: 0.5
          });

          circle.setMap(map);
          smallCircle.setMap(map);

          // This is the animation
          var direction = 0.8;
          var rMin = 5, rMax = 20;
          setInterval(function() {
              var radius = circle.getRadius();
              if ((radius > rMax) || (radius < rMin)) {
                  direction *= -1;
              }
              circle.setRadius(radius + direction * 0.4);
              }, 50);

        }
    }

我尝试了一个 if 语句来声明，如果已经有一个圆，它应该改变它的中心（位置）。否则，它应该创建一个新的。

我希望只创建一个圆圈动画，并且每次用户更改其位置时它都可以重新居中，但现在它在更改位置时创建一个新圆圈。

*更新现在我已经从它正在工作的函数中删除了圆参数。 :)

【问题讨论】：

您的代码中有错字：locationMarker(pos) 应该是您调用它的locationMarker(pos, circle, smallCircle)。使用您当前的代码 circle 和 smallCircle 将始终为空。
谢谢你我已经用你的反馈更新了它，但同样的问题一直在发生。

标签： javascript google-maps-api-3 geolocation google-maps-markers directions

【解决方案1】：

~~绘制圆圈的函数似乎接受圆圈作为参数。~~

function locationMarker(user, circle, smallCircle)

但是当您实际将此函数称为showPosition 函数时，您只是将用户位置传递给它。

locationMarker(pos);

因此，函数参数 circle 和 smallCircle 将为空，并且因为它在函数范围内，它们将获得高于全局 circle 和 smallCircle 声明的变量的“优先级”在脚本的顶部。

编辑：示例已更新，现在circle 和smallCircle 被传递给函数，但仍然存在问题。当您创建圆圈并将它们分配给circle 和smallCircle 时，您将分配给函数的参数，这些参数与顶部声明的全局圆圈完全分开。一旦函数超出范围，那些参数就会消失并且全局变量不会被触及。

解决方法：从函数中去掉圆参数，只依赖全局变量

function locationMarker(user)

【讨论】：