如何更改谷歌地图 v3 标记图标的颜色

Question

我使用一系列点和一个圆圈作为图标在页面上放置一系列谷歌地图标记。

所有标记都位于页面上后，我想更改其中一个标记圆圈的填充颜色。例如，我如何识别系列中的第三个标记，以便我可以进行更改？如何更改填充颜色？我没有使用谷歌地图事件来识别标记。

let map;

async function initMap() {
    // The location of the point
    const position = { lat: 40.44396002705076, lng: -80.00466302883518 };
    const { Map } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
     
      // The map, centered at the point
    map = new Map(document.getElementById("map"), {
        zoom: 15,
        center: position,
        mapId: "6366bc12ac68e27f",
        
    });

 var arrMuralPositions = [
    { lat: 40.44215080214157, lng: -80.00194178463394 }, //stop 1
    { lat: 40.44219643284648, lng: -79.99723183193605 },//stop 2
    { lat: 40.44147920270817, lng: -79.99549375400392 },//stop 3
];

var myLabel;
     for (var i = 0; i<arrMuralPositions.length; i++) {
        myLabel = i+1;
         new google.maps.Marker({
        //new google.maps.marker.AdvancedMarkerElement({
            position: arrMuralPositions[i],
            label: {text: myLabel.toString(), color: "white"},
            icon: {
              path: google.maps.SymbolPath.CIRCLE,
              scale: 10,
             // fillColor: "#D8896D",
              fillColor: "#376cb9",
              strokeColor: "#376cb9",
              fillOpacity: 1,
              strokeWeight: 1,
            },
            map: map,
          }); 
     }

}

initMap();

//now how do I change the fillColor of the second Marker that I placed?

Answer 1

要更改标记的颜色，请更改其图标的填充和描边颜色：

  function highlightMarker(marker) {
    var icon = marker.getIcon()
    icon.fillColor = "black";
    icon.strokeColor = "black";
    marker.setIcon(icon);
  }

要在这个简单的情况下将颜色更改回相同的颜色，请将其更改回原始值：

  function unhighlightMarker(marker) {
    var icon = marker.getIcon();
    icon.fillColor = "#376cb9";
    icon.strokeColor = "#376cb9";
    marker.setIcon(icon);
  }

跟踪标记的最简单方法是将它们添加到数组中。

相关问题： Google 地图 API - 显示选择的标记

概念证明小提琴

代码片段：

let map
let gmarkers = []

async function initMap() {
  // The location of the point
  const position = {
    lat: 40.44396002705076,
    lng: -80.00466302883518
  }
  const {
    Map
  } = await google.maps.importLibrary("maps")
  const {
    AdvancedMarkerElement,
    PinElement
  } =
  await google.maps.importLibrary("marker")

  // The map, centered at the point
  map = new Map(document.getElementById("map"), {
    zoom: 15,
    center: position,
    mapId: "6366bc12ac68e27f",
  })

  var arrMuralPositions = [
    {lat: 40.44215080214157,lng: -80.00194178463394}, //stop 1
    {lat: 40.44219643284648,lng: -79.99723183193605}, //stop 2
    {lat: 40.44147920270817,lng: -79.99549375400392}, //stop 3
  ]

  var myLabel
  for (var i = 0; i < arrMuralPositions.length; i++) {
    myLabel = i + 1
    gmarkers.push(
      new google.maps.Marker({
        //new google.maps.marker.AdvancedMarkerElement({
        position: arrMuralPositions[i],
        label: {
          text: myLabel.toString(),
          color: "white"
        },
        icon: {
          path: google.maps.SymbolPath.CIRCLE,
          scale: 10,
          // fillColor: "#D8896D",
          fillColor: "#376cb9",
          strokeColor: "#376cb9",
          fillOpacity: 1,
          strokeWeight: 1,
        },
        map: map,
      }),
    )
  }
  highlightMarker(gmarkers[1]);
  setTimeout(function() {
    unhighlightMarker(gmarkers[1])
  }, 5000);
  setTimeout(function() {
    highlightMarker(gmarkers[2])
  }, 10000);
  setTimeout(function() {
    unhighlightMarker(gmarkers[2])
  }, 15000);


  function highlightMarker(marker) {
    var icon = marker.getIcon();
    console.log(JSON.stringify(icon));
    icon.fillColor = "yellow";
    icon.strokeColor = "yellow";
    marker.setIcon(icon);
    var label = marker.getLabel();
    label.color = "black";
    marker.setLabel(label);
  }

  function unhighlightMarker(marker) {
    var icon = marker.getIcon();
    console.log(JSON.stringify(icon));
    icon.fillColor = "#376cb9";
    icon.strokeColor = "#376cb9";
    marker.setIcon(icon);
    var label = marker.getLabel();
    label.color = "white";
    marker.setLabel(label);
  }
}

initMap()

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!doctype html>
<html>

<head>
  <title>Default Advanced Marker</title>

  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>

  <!-- prettier-ignore -->
  <script>
        (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk", v: "weekly"});
  </script>
</body>

</html>