如何更改谷歌地图中的标记图像答案

【问题标题】：how to change marker image in a google map如何更改谷歌地图中的标记图像
【发布时间】：2017-11-04 06:32:00
【问题描述】：

我在地图中显示了 20 个标记，我需要用一个图标显示 10 个标记，而其他 10 个标记要显示在其他图标中。标记 myLatLng 到 myLatLng9 应该具有相似的标记，标记 myLatLngb 到 myLatLngb9 应该具有相同的标记。你能帮我改变什么，这样我就可以区分两个标记和标签标记 - myLatLng 到 myLatLng9 为 A，myLatLngb 到 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>

【问题讨论】：

你能把它扔到代码 sn-p 或 jsfiddle 或 codepen 中吗？
请一个工作一个
@GabeRogan，他必须发布他的 API 密钥。
好好使用我的：AIzaSyDCwlz-5ck8db_XBKM1COAzlNBcmEXsVag 但here's the link 自己买。
我认为手动需要这些坐标。你能提供 20 纬度/经度坐标吗？

标签： javascript google-maps google-maps-api-3 google-maps-markers

【解决方案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);

【讨论】：