如何在 mps 选项和谷歌地图上添加标签复选框

Question

如何在 mps 选项和 google 地图上添加标签复选框

使用地图显示我的工作人员路线并计算目的地路线需要在地图侧添加标签复选框，这是当前的卫星选项。

<script type="text/javascript">

    var GooglemarkersArray = [];
    var GooglemarkersArrayAssigned = [];
    var markerselected = new Array();
    var map;
    var coord = new Array();
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    directionsDisplay = new google.maps.DirectionsRenderer();
    var cityCircle;
    var contextMenu;
    var contextMenuCircle;
    var infoWindow;
    var bounds;
    var GooglePolygonsArray = new Array();
    var polycount = 0;
    var IsPolygonEdited = 0;

    function initialize() {
        cityCircle = new google.maps.Circle();
        GooglemarkersArray = [];
        GooglePolygonsArray = [];
        markerselected = new Array();
        coord = new Array();
        infoWindow = new google.maps.InfoWindow({ maxWidth: 300 });
        bounds = new google.maps.LatLngBounds();

        var mapOptions = {
            zoom: 6,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: new google.maps.LatLng(0, 0),
            scrollwheel: true
        }
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        mapTypeControlOptions: {
            mapTypeIds: ['roadmap', 'hybrid']
        }
        var markers = JSON.parse(document.getElementById('<%=hdnMarkers.ClientID%>').value);
        AddMarker(markers, 1, 'NONE');

        // alert(markers.length);
        const styles = {
            default: [],
            hide: [
                {
                    featureType: "poi",
                    stylers: [{ visibility: "off" }],
                },                    
                {
                    featureType: "transit",
                    elementType: "labels.icon",
                    stylers: [{ visibility: "true" }],
                },
            ],
        };
        map.setOptions({ styles: styles["hide"] });
        AddContextMenu();           


        var noTransitStationsStyle = [
            {
                featureType: 'transit.station',
                elementType: 'all',
                stylers: [
                    { visibility: 'off' }
                ]
            }
        ];

        var mapOptions = {
            zoom: 15,
            center: swiss
        };

        ////var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        var mapType = new google.maps.StyledMapType(noTransitStationsStyle, { name: 'No Stations' });

        map.mapTypes.set('nostations', mapType);
        map.setMapTypeId('nostations');
    }
   
    google.maps.event.addDomListener(window, 'load', initialize);


    function AddMarker(markers, boundmap, animation) {

        for (var i = 0; i < markers.length; i++) {
            AddSingleMarker(markers[i], infoWindow, bounds);
        }
        if (boundmap == 1) {
            map.fitBounds(bounds);
        }
    }

    function AddSingleMarker(markeradd) {
        var data = markeradd;
        var myLatlng = new google.maps.LatLng(data.lat, data.lng);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: data.title,
            icon: "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=|" + GetColor(data.worker) + "|ffffff"
            //                    ,animation: google.maps.Animation.DROP
        });
        (function (marker, data) {
            google.maps.event.addListener(marker, "click", function (e) {
                infoWindow.setContent('<div STYLE=width:200px; height:150px><DIV  width:200px; height:150px><a style="cursor:pointer;" onclick=" openAssignMarkerPopup(' + data.loc + ');"><i>' + data.worker + '</i></a></br><b>' + data.title + '</b></br>' + data.description + '</DIV></DIV>');
                infoWindow.open(map, marker);
            });

        })(marker, data);
        GooglemarkersArray[data.loc] = marker;
        bounds.extend(myLatlng);
    }

    function openAssignMarkerPopup(loc) {
        $("#<%=hdnMarkerLoc.ClientID%>").val(loc);
        $find('PMPMarker').show();
    }

    function AddAssignedMarker() {
        GooglemarkersArrayAssigned = [];
        var markerValues = document.getElementById('<%=hdnAssignedMarkers.ClientID%>').value;
        if (markerValues == '') {
            return;
        }
        var markers = JSON.parse(markerValues);

        var infoWindow = new google.maps.InfoWindow({ maxWidth: 300 });
        for (var i = 0; i < markers.length; i++) {
            var data = markers[i];
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            var marker = new google.maps.Marker({
                animation: google.maps.Animation.DROP,
                position: myLatlng,
                map: map,
                title: data.title,
                optimized: false,
                icon: "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=T|" + GetColor(data.assdwrkr) + "|000"
            });
            (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    infoWindow.setContent('<div STYLE=width:200px; height:150px><DIV  width:200px; height:150px>Newly assigned worker: <i>' + data.assdwrkr + '</i></br><b>' + data.title + '</b></br>' + data.description + '</DIV></DIV>');
                    infoWindow.open(map, marker);
                });
            })(marker, data);
            GooglemarkersArrayAssigned.push(marker);
        }
    }

    function AddLocationMarker() {
        var markers = JSON.parse(document.getElementById('<%=hdnMarkers.ClientID%>').value);
        var marker;

        var loc = $("#<%=hdnMarkerLoc.ClientID%>").val();
        deleteMarker(GooglemarkersArray[loc]);

        $(markers).each(function (ind) {
            if (this["loc"] == loc) {
                marker = this;
            }
        });
        AddSingleMarker(marker);
    }

    function AddAllMarkers() {
        deleteAllMarkers();
        var markers = JSON.parse(document.getElementById('<%=hdnMarkers.ClientID%>').value);
        AddMarker(markers, 0, 'NONE');
    }


    function deleteAllMarkers() {
        var markers = JSON.parse(document.getElementById('<%=hdnMarkers.ClientID%>').value);
        $.each(markers, function (index) {
            if (typeof GooglemarkersArray[this["loc"]] != "undefined") {
                deleteMarker(GooglemarkersArray[this["loc"]]);
            }
        });
        GooglemarkersArray = [];
    }

    function deleteMarker(marker) {
        marker.setMap(null);
    }

    function clearOverlays(markersArray) {
        for (var i = 0; i < markersArray.length; i++) {
            markersArray[i].setMap(null);
        }
        markersArray = [];
    }
</script>