如何更改谷歌地圖中的標記圖像

Question

我在地圖上顯示了20個標記，我需要顯示10個標記，其中一個圖標和其他10個標記要顯示在其他圖標中。 標記myLatLng到myLatLng9應該具有相似的標記，並且標記myLatLngb到myLatLngb9應該具有相同的標記。 u能幫助我改變什麼，這樣我可以區分2個標記和標籤也 標記 - myLatLng到myLatLng9爲A和myLatLngb到myLatLngb9爲B.

爵士小提琴 - https://jsfiddle.net/9yq8y1p2/4/ 代碼

<script> 

    function initMap() { 
     var labels = ''; 
     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);