如何在谷歌地图中显示不同颜色的最新标记

Posted 2021-04-02

我有一些标记，因为我需要以不同的颜色或图像显示最新的标记，以便它可以轻松识别当前位置。所有的标记应该是一个颜色，最新的标记应该是不同的颜色。

function initMap() {
        var labelIndex = 0;
        var lstLatLng = [];
        @if (Model.AssetTrackers[0].latitude.Count > 0)
        {
            for (int i = 0; i < Model.AssetTrackers[0].latitude.Count; i++)
            {
                @: lstLatLng.push({ lat: @Model.AssetTrackers[0].latitude[i],lng: @Model.AssetTrackers[0].longitude[i],deviceId: '@Model.AssetTrackers[0].deviceid', time: '@Model.AssetTrackers[0].time[i]' })
            }
        }
        else
        {

         }
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 14,
            center: { lat: 22.791761, lng: 86.177719 },
        });
        var image = "~/images/pickup.png";
        var drawingManager = new google.maps.drawing.DrawingManager({
            drawingControl: true,
            drawingControlOptions: {
                position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: ['polyline']
            },
            markerOptions: { icon: '~/images/pickup.png' },
        });
        drawingManager.setMap(map);
        var pathBetween = new google.maps.Polyline({
            path: lstLatLng,
            strokeColor: '#00B3FD',
            strokeOpacity: 1.0,
            strokeWeight: 2
        });
        pathBetween.setMap(map);
        var polylines = [];
        var deviceIds = [];
        function addMarker(markerSettings, label) {
                var marker = new google.maps.Marker({
                    position: markerSettings,
                    map: map,
                    title: markerSettings.time,
                    icon: "~/images/location.png"
                });
        }
        for (var i = 0; i < lstLatLng.length; i++) {
            addMarker(lstLatLng[i], (i+1).toString());
        }
    }

答案

改变这个：

function addMarker(markerSettings, label) {
                var marker = new google.maps.Marker({
                    position: markerSettings,
                    map: map,
                    title: markerSettings.time,
                    icon: "~/images/location.png"
                });
        }
        for (var i = 0; i < lstLatLng.length; i++) {
            addMarker(lstLatLng[i], (i+1).toString());
        }

至：

for (var i = 0; i < lstLatLng.length; i++) {
    var marker = new google.maps.Marker({
        position: lstLatLng[i],
        map: map,
        title: markerSettings.time,
        icon: i === lstLatLng.length-1 : "~/images/differentColour.png" ? "~/images/location.png"
    });
}

另一答案

   function initMap() {
                var labelIndex = 0;
                var lstLatLng = [];
                @if (Model.AssetTrackers[0].latitude.Count > 0)
                {
                    for (int i = 0; i < Model.AssetTrackers[0].latitude.Count; i++)
                    {
                        @: lstLatLng.push({ lat: @Model.AssetTrackers[0].latitude[i],lng: @Model.AssetTrackers[0].longitude[i],deviceId: '@Model.AssetTrackers[0].deviceid', time: '@Model.AssetTrackers[0].time[i]' })
                    }
                }
                else
                {

                 }
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 14,
                    center: { lat: 26.791761, lng: 89.177719 },
                });
                var image = "http://xyz/images/pickup.png";
                var drawingManager = new google.maps.drawing.DrawingManager({
                    drawingControl: true,
                    drawingControlOptions: {
                        position: google.maps.ControlPosition.TOP_CENTER,
                        drawingModes: ['polyline']
                    },
                    markerOptions: { icon: 'http://xyz/images/pickup.png' },
                });
                drawingManager.setMap(map);
                var pathBetween = new google.maps.Polyline({
                    path: lstLatLng,
                    strokeColor: '#00B3FD',
                    strokeOpacity: 1.0,
                    strokeWeight: 2
                });
                pathBetween.setMap(map);
                var polylines = [];
                var deviceIds = [];
                function addMarker(markerSettings, label) {
                        var marker = new google.maps.Marker({
                            position: markerSettings,
                            map: map,
                            title: markerSettings.time,
                            icon: "http://www.images.greenmarker.png"
                    });
                        if (i === lstLatLng.length - 1) {
                            var marker = new google.maps.Marker({
                                position: markerSettings,
                                map: map,
                                title:'hello',
                            });
                        }
                }
                for (var i = 0; i < lstLatLng.length; i++) {
                    addMarker(lstLatLng[i], (i + 1).toString());
                }
                alert(lstLatLng.length);
                alert(i);
            }