如何在Google地图中更改标记图像

Question

我在地图中显示了20个标记，我需要用一个图标显示10个标记，而其他10个标记希望在其他图标中显示。Mylatlng的标记物应该具有相似的标记，并且标记与mylatlngb9的标记应具有相同的标记。您能帮我改变什么，以便我可以区分两个标记和标签标记-Mylatlng to mylatlng9作为a和mylatlngb to mylatlngb9作为b。

JS小提琴-https：//jsfiddle.net/9yq8y1p2/4/代码

 <script>
    function initMap() {
        var labels = '0123456789';
        var labelIndex = 0;

                   // @Model.AssetTrackers[0].deviceid
                   @: var myLatLng =  { lat: @Model.AssetTrackers[0].latitude[0],lng: @Model.AssetTrackers[0].longitude[0],deviceId:'@Model.AssetTrackers[0].deviceid'};
                  //.......
                   @: var myLatLng9 = { lat: @Model.AssetTrackers[0].latitude[9],lng: @Model.AssetTrackers[0].longitude[9],deviceId: '@Model.AssetTrackers[0].deviceid' };
                   //tracker 2
                     @: var myLatLngb =  { lat: @Model.AssetTrackers[1].latitude[0],lng: @Model.AssetTrackers[1].longitude[0],deviceId:'@Model.AssetTrackers[1].deviceid'};
                  //......
                   @: var myLatLngb9 = { lat: @Model.AssetTrackers[1].latitude[9],lng: @Model.AssetTrackers[1].longitude[9],deviceId: '@Model.AssetTrackers[1].deviceid' };

    var citymap = {
        abc: {
            center: { lat: 17.446507, lng: 78.383033 },
        }
    };
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 18,
        center: myLatLng,
    });

    var image = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
    var drawingManager = new google.maps.drawing.DrawingManager({
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: ['polyline']
        },
        markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
        circleOptions: {
            fillColor: '#ffff00',
            fillOpacity: 1,
            strokeWeight: 5,
            clickable: false,
            editable: true,
            zIndex: 1
        }
    });
    drawingManager.setMap(map);
       var pathBetween = new google.maps.Polyline({
        path: [myLatLng,myLatLng1,myLatLng2,myLatLng3,myLatLng4,myLatLng5,myLatLng6,myLatLng7,myLatLng8,myLatLng9],
        strokeColor: '#8D6E63',
        strokeOpacity: 1.0,
        strokeWeight: 2
        });
       // second tracker path
        var pathbetweenb = new google.maps.Polyline({
            path: [myLatLngb, myLatLngb1, myLatLngb2, myLatLngb3, myLatLngb4, myLatLngb5, myLatLngb6, myLatLngb7, myLatLngb8, myLatLngb9],
            strokecolor: '#8D6E63',
            strokeopacity: 1.0,
            strokeweight: 2
        });

        pathBetween.setMap(map);
        pathbetweenb.setMap(map);

    var path = JSON.parse('[@(Html.Raw(ViewBag.PolyLine))]');
    var pathBetween1 = new google.maps.Polyline({
        path: path,
        strokeColor: '#3C8DBC',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
    pathBetween1.setMap(map);
    var polylines = [];
    google.maps.event.addListener(drawingManager, 'polylinecomplete', function(polyline) {
        polylines.push(polyline);
        var polylinePath = polyline.getPath();
        console.log(polylinePath.getArray().toString());
        var polyarray = [];
        for (var i = 0; i < polylinePath.getArray().length; i++) {
            polyarray.push('{"lat":'+polylinePath.getArray()[i].lat() + ', "lng":' + polylinePath.getArray()[i].lng() + '}');
        }
        drawingManager.setDrawingMode(null);
    });
        var deviceIds = [];
    function addMarker(markerSettings) {
        if (!insidePolygon(markerSettings)) {
            deviceIds.push(markerSettings.deviceId);
            var deviceId = $.grep(deviceIds, function( a ) {
                return a === markerSettings.deviceId;
            })
            if(deviceId.length == 1){
                });
            }
            var marker = new google.maps.Marker({
                position: markerSettings,
                map: map,
                title: '@Model.AssetTrackers[0].deviceid',
                label:"A"+ labels[labelIndex++ % labels.length],
                icon : "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png"
            });
        }
        else{
            var marker = new google.maps.Marker({
                position: markerSettings,
                map: map,
                title: '@Model.AssetTrackers[0].deviceid',
                label:"A"+ labels[labelIndex++ % labels.length]
            });
        }
    }
    addMarker(myLatLng);
    addMarker(myLatLng1);
    addMarker(myLatLng2);
    addMarker(myLatLng3);
    addMarker(myLatLng4);
    addMarker(myLatLng5);
    addMarker(myLatLng6);
    addMarker(myLatLng7);
    addMarker(myLatLng8);
    addMarker(myLatLng9);
        //second 
        addMarker(myLatLngb);
        addMarker(myLatLngb1);
        addMarker(myLatLngb2);
        addMarker(myLatLngb3);
        addMarker(myLatLngb4);
        addMarker(myLatLngb5);
        addMarker(myLatLngb6);
        addMarker(myLatLngb7);
        addMarker(myLatLngb8);
       addMarker(myLatLngb9);
   }
    </script>

Answer 1

修改您的addmarker函数，并传递图标路径一个参数。希望它有帮助！

  function addMarker(markerSettings,iconImg) 
        {
        var marker = new google.maps.Marker({
                        position: markerSettings,
                        map: map,
                        title: '@Model.AssetTrackers[0].deviceid',
                        label: "A" + labels[labelIndex++ % labels.length],
                       //Pass IconImg here
                        icon: iconImg
                    });
        }

        var icon1='http://maps.google.com/mapfiles/ms/icons/green.png';
        var icon2='http://maps.google.com/mapfiles/ms/icons/blue.png';
            addMarker(myLatLng,icon1);
            addMarker(myLatLng1,icon1);
            addMarker(myLatLng2,icon1);
            addMarker(myLatLng3,icon1);
            addMarker(myLatLng4,icon1);
            addMarker(myLatLng5,icon1);
            addMarker(myLatLng6,icon1);
            addMarker(myLatLng7,icon1);
            addMarker(myLatLng8,icon1);
            addMarker(myLatLng9,icon1);
            //second tracker
            addMarker(myLatLngb,icon2);
            addMarker(myLatLngb1,icon2);
            addMarker(myLatLngb2,icon2);
            addMarker(myLatLngb3,icon2);
            addMarker(myLatLngb4,icon2);
            addMarker(myLatLngb5,icon2);
            addMarker(myLatLngb6,icon2);
            addMarker(myLatLngb7,icon2);
            addMarker(myLatLngb8,icon2);
            addMarker(myLatLngb9,icon2);