Question

如何将传递给JavaScript函数的对象数组转换为适合构造google.maps.Polyline的google.maps.LatLng对象的普通数组。我正在尝试从传入JavasSript函数的经/纬度对象数组初始化google map实例。查看我的JavaScript控制台（在Vhrome浏览器中），可以看到我成功接收到66个对象的数组。

下面的var updateMap = function (flightPlan)是我遇到问题的地方。

<script>
    // This example creates a 2-pixel-wide red polyline showing the path of
    // the first trans-Pacific flight between Oakland, CA, and Brisbane,
    // Australia which was made by Charles Kingsford Smith.
    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 3,
            center: { lat: 0, lng: -180 },
            mapTypeId: 'terrain'
        });

        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);

        // function to initialize google map with a flight plan
        // effectively an array of waypoints containing
        // latitude, longitude and bearing.  The flightPlan below
        // is an array of json objects.
        var updateMap = function (flightPlan) {
            // waypoint data is always a list of nulls
            console.log(flightPlan);
            // how do I create an array similar to
            // var flightPlanCoordinates above suitable
            // for initializing the google map
            var latLngArray;
            // how do I convert to suitable lat/lng array
            //waypointData.forEach(function(next)){
            //    latLngArray.push(new google.maps.LatLng(
            //        next.lat, next.lng));
            //}
            // waypoint data is always a list of nulls
            console.log(latLngArray);
        }

        // script called once web page loaded
        window.onload = function () {
            new QWebChannel(qt.webChannelTransport,
                function (channel) {
                    console.log(channel.objects);
                    // whenever the route data changes, invoke updateMap slot
                    var dataSource = channel.objects.routeIPC;
                    dataSource.routesChanged.connect(updateMap);
                }
            );
        }

    }
</script>

Answer 1

基本用法，例如仅使用新属性“ ID”修改对象，可以随时删除：

const normalArray = jsonArray.map(item => {
 const constructedItem = {...item, id: generateRandomID()};

 return constructedItem;
});

将Javascript对象数组转换为google.maps.LatLng对象数组

1 个答案: