地图折线，停止绘制

Question

Google地图版本：3.37.1 测试型号：      iphoneX，IOS 12.4      荣誉Magic2，Android 9.0

单击按钮更改日期并绘制地图
步： 1.单击“ point1”->“ point2”->“ point3”->“ point2” 2.地图将停止绘制。
我们尝试在Chrome的Toggle设备工具栏上模拟移动设备，它可以正常工作。我们还发现，如果我们缩小地图显示区域，则不会经常发生此问题。到目前为止，我们将地图设置为在移动设备上全屏显示，但是iOS上的问题要比Android上的问题更为常见。

    var googleMap,
        googleMapLoaded,
        markers = [];

    var point1 = [{
        lat: "39.90419989999999",
        lng: "116.4073963",
        name: 1
    }, {
        lat: "47.790148349999996",
        lng: "64.48786675",
        name: 2
    }, {
        lat: "55.6760968",
        lng: "12.5683372",
        name: 3
    }]
    var point2 = [{
        lat: "55.6760968",
        lng: "12.5683372",
        color: "#FF0000",
        name: 4
    }, {
        lat: "41.38506389999999",
        lng: "2.1734035",
        color: "#FF0000",
        name: 5
    }, {
        lat: "41.90278349999999",
        lng: "12.4963655",
        color: "#FF0000",
        name: 6
    }, {
        lat: "47.497912",
        lng: "19.040235",
        color: "#FF0000",
        name: 7
    }, {
        lat: "50.0755381",
        lng: "14.4378005",
        color: "#FF0000",
        name: 8
    }]
    var point3 = [{
        lat: "47.6062095",
        lng: "-122.3320708",
        color: "#FF0000",
        name: 85
    }, {
        lat: "48.5342662",
        lng: "-123.0171242",
        color: "#FF0000",
        name: 84
    }, {
        lat: "48.993723",
        lng: "-122.7471191",
        color: "#FF0000",
        name: 83
    }, {
        lat: "48.0795365",
        lng: "-123.1018438",
        color: "#FF0000",
        name: 82
    }, {
        lat: "45.62722589999999",
        lng: "-122.6727305",
        color: "#FF0000",
        name: 81
    }]
    var points = []
    var polylines = []

    function initMap() {
        // Create the map.
        var mapOptions = {
            center: {
                lat: 39.90419989999999,
                lng: 116.4073963
            },
            zoom: 2

        };
        googleMap = new google.maps.Map(document.getElementById('mapCanvas'), mapOptions);
    }

    /**
     * Clears markers and directions from the map.
     */
    var clearMap = function() {
        while (markers.length > 0) {
            markers.pop().setMap(null);
        }
        clearMapDirections();
    };

    /**
     * Clears the directions from the map.
     */
    var clearMapDirections = function() {
        while (polylines.length > 0) {
            polylines.pop().setMap(null);
        }

    };
    var showMapMarkers = function(points) {
        // clear map
        clearMap();

        var mapPosition;
        // add points and compute bounds
        mapBounds = new window.google.maps.LatLngBounds();
        var i = 0;
        for (i = 0; i < points.length; i++) {
            var pointData = points[i];
            mapPosition = new window.google.maps.LatLng(pointData.lat, pointData.lng);

            var marker = new google.maps.Marker({
                position: {
                    lat: Number(pointData.lat),
                    lng: Number(pointData.lng)
                }
            })
            marker.setMap(googleMap);
            markers.push(marker);
            mapBounds.extend(mapPosition);
        }

        // calculate the center / bounds of the map view
        if (points.length === 1) {
            googleMap.setCenter(mapBounds.getCenter());
            googleMap.setZoom(10);
        } else {
            googleMap.fitBounds(mapBounds);
        }
        routeAndDisplayDirections(points)
    };
    /*
     * Polyline
     */
    var routeAndDisplayDirections = function(points) {

        if (points.length > 1) {
            // render a route for the points

            var gmapPoints = [];
            var i;
            for (i = 0; i < points.length; i++) {
                gmapPoints.push(new window.google.maps.LatLng(points[i].lat, points[i].lng));
            }
            var lines = new window.google.maps.Polyline({
                path: gmapPoints,
                geodesic: true,
                strokeColor: '#FF0000',
                strokeOpacity: 0.57,
                strokeWeight: 4
            });
            lines.setMap(googleMap);
            if (googleMap === googleMap) {
                polylines.push(lines);
            }
        }
    }

    $("#btn1").on("click", function() {
        showMapMarkers(point1)
    })
    $("#btn2").on("click", function() {
        showMapMarkers(point2)
    })
    $("#btn3").on("click", function() {
        showMapMarkers(point3)
    })