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

Posted 2023-03-28

【中文标题】如何防止在圆圈中心发生变化时创建新圆圈。 （谷歌地图 API）

【英文标题】：How to prevent new circles to be created whenever the circle's center changes. (Google Maps 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 将始终为空。

谢谢你我已经用你的反馈更新了它，但同样的问题一直在发生。

【参考方案1】：

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

function locationMarker(user, circle, smallCircle)

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

locationMarker(pos);

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

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

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

function locationMarker(user)