我是 React 的新手，一直在玩 react-google-maps 包。我正在尝试弯曲连接两个地方的折线。在阅读完文档后，我尝试将曲线折线函数合并到“可编辑”props下。

这是弯曲折线的函数：

var map;
var curvature = 0.4; // Arc of the Polyline

function init() {
        var Map = google.maps.Map,
            LatLng = google.maps.LatLng,
            LatLngBounds = google.maps.LatLngBounds,
            Marker = google.maps.Marker,
            Point = google.maps.Point;

            // Initial location of the points
            var pos1 = new LatLng(this.state.srcMarker);
            var pos2 = new LatLng(this.state.desMarker);

            var bounds = new LatLngBounds();
            bounds.extend(pos1);
            bounds.extend(pos2);

            map = new Map(document.getElementById('map-canvas'), {
                    center: bounds.getCenter(),
                    zoom: 12
            });
            map.fitBounds(bounds);

            var markerP1 = new Marker({
                    position: pos1,
                    map: map
            });
            var markerP2 = new Marker({
                    position: pos2,
                    map: map
            });

            var curveMarker;

            function updateCurveMarker() {
                    var pos1 = markerP1.getPosition(), 
                    pos2 = markerP2.getPosition(),
                    projection = map.getProjection(),
                    p1 = projection.fromLatLngToPoint(pos1), 
                    p2 = projection.fromLatLngToPoint(pos2);

                    // Calculating the arc.
                    var e = new Point(p2.x - p1.x, p2.y - p1.y), // endpoint
                        m = new Point(e.x / 2, e.y / 2), // midpoint
                        o = new Point(e.y, -e.x), // orthogonal
                        c = new Point( m.x + curvature * o.x, m.y + curvature * o.y); //curve control point

                    var pathDef = 'M 0,0 ' + 'q ' + c.x + ',' + c.y + ' ' + e.x + ',' + e.y;

                    var zoom = map.getZoom(),
                        scale = 1 / (Math.pow(2, -zoom));

                    var symbol = {
                            path: pathDef,
                            scale: scale,
                            strokeWeight: 1,
                            fillColor: 'none'
                    };

                    if (!curveMarker) {
                            curveMarker = new Marker({
                                    position: pos1,
                                    clickable: false,
                                    icon: symbol,
                                    zIndex: 0, // behind the other markers
                                    map: map
                            });
                    } else {
                            curveMarker.setOptions({
                                    position: pos1,
                                    icon: symbol,
                            });
                    }
            }

            google.maps.event.addListener(map, 'projection_changed', updateCurveMarker);
            google.maps.event.addListener(map, 'zoom_changed', updateCurveMarker);

            google.maps.event.addListener(markerP1, 'position_changed', updateCurveMarker);
            google.maps.event.addListener(markerP2, 'position_changed', updateCurveMarker);
    }

    google.maps.event.addDomListener(window, 'load', init);

我无法理解如何在 Polyline 组件中使用此功能。我可以在任意两个位置之间标记一条线，但不能使用此功能来弯曲给定的折线。这是我正在使用的 Polyline 组件。

<Polyline
        path={pathCoordinates} 
        geodesic={true} 
        options={{ 
                strokeColor: '#ff2527',
                        strokeOpacity: 1.0,
                        strokeWeight: 5,
        }}
/>

我的状态中有两个标记（srcMarker、desMarker），一旦用户输入城市名称，它们就会存储给定城市的坐标。将此功能与折线组件结合使用的任何帮助将不胜感激。我还没有遇到任何允许折线弯曲的内置功能。提前致谢！