如何在Google Maps点击事件中向Polyline路径变量追加坐标？

嘿，这问题其实挺常见的，咱们直接改代码就能搞定！核心就是要让点击事件能访问到Polyline实例和坐标数组，然后每次点击时更新数组并同步到Polyline上。

关键修改点： #

• 把flightPlanCoordinates和flightPath的声明移到点击事件监听器外面，确保点击回调能访问到这两个变量
• 在点击事件里，将新坐标对象push到坐标数组中
• 调用flightPath.setPath()方法，让地图上的路线同步更新

修改后的完整代码： #

<!DOCTYPE html>
<html>
<head>
  <style>
    #map { height: 600px; width: 100%; }
  </style>
</head>
<body>
  <h3>My Google Maps Demo</h3>
  <div id="map"></div>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBpQwkFGfliyQ_B52NBJFEyQd1_fD8gV6g&callback=initMap">
  </script>
  <script>
    function initMap() {
      var location = { lat: 51.3554957, lng: 5.4533268000000135 };
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: location
      });

      // 把坐标数组和Polyline实例提前声明，让点击事件能访问
      var flightPlanCoordinates = [{ lat: 37.772, lng: -122.214 }, { lat: 21.291, lng: -157.821 }, { lat: -18.142, lng: 178.431 }, { lat: -27.467, lng: 153.027 } ];
      var flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
      });
      flightPath.setMap(map);

      google.maps.event.addListener(map, "click", function(event) {
        var latitude = event.latLng.lat();
        var longitude = event.latLng.lng();
        console.log(latitude + ', ' + longitude);
        
        // 将新坐标追加到数组末尾
        flightPlanCoordinates.push({ lat: latitude, lng: longitude });
        // 更新Polyline的路径，地图上的红线会自动刷新
        flightPath.setPath(flightPlanCoordinates);
      });
    }
  </script>
</body>
</html>

为什么这么改？ #

原来的代码里，flightPlanCoordinates和flightPath是在点击监听器之后声明的，监听器内部根本拿不到这两个变量。现在把它们移到监听器前面，点击时就能直接操作数组，再通过setPath()方法通知Google Maps更新路线——这个方法会自动读取数组里的最新坐标，重新渲染Polyline。

现在你点击地图任意位置，新坐标就会追加到路线末尾，地图上的红线也会跟着延长啦！

内容的提问来源于stack exchange，提问作者Granny