javascript - 动态更改 GoogleMap 图标/标记的颜色

Question

我正在尝试根据用户输入使用 GoogleMaps API V3 更改标记/图标的颜色。我可以将我想要的颜色或图像链接硬编码到 Javascript 中，但是如果我尝试从我的 Java 程序中将颜色或链接作为字符串变量传递，那么它要么不显示，要么默认为红色标记。

我查看了以下所有主题和 google API:

• > Google Maps API 3 - Custom marker color for default (dot) marker
• > How do I change icon colour in Google Maps API V3?
• > Google Maps API 3 - Custom marker color for default (dot) marker
• > https://developers.google.com/maps/documentation/javascript/markers

所有这些都具有指向他们想要使用的标记图标的链接，或者已经硬编码到 javascript 中的颜色 HEX 代码。

我的尝试，其中 address1 和 color1 都是从我的 Java 代码传递给 javascript 的字符串。 color1 的字符串，例如可以是

"http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld •|4D8080":

function codeAddress(address1, color1){
var pinColor = color1;
address=address1;
document.geocoder.geocode( {'address': address1}, function(results, status) {
  app.callFromJavascript(address1);
      if (status == google.maps.GeocoderStatus.OK) {
        document.map.setCenter(results[0].geometry.location);
        document.map.setZoom(13);
        var marker = new google.maps.Marker({
            icon:  pinColor,
            position: results[0].geometry.location,
            map: document.map
                });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
}

这会导致 map 以该位置为中心并显示默认的红色标记。如果我将传递给 color1 的字符串更改为“http://maps.google.com/mapfiles/ms/icons/yellow-dot.png”，则根本不会显示任何标记。

我错过了什么，我无法让这些从传递的变量中生成？对位置标记进行硬编码是不可能的还是强制性的？

Answer 1

所以如果你已经有了一个十六进制代码并且你有一个看起来像这样的图标对象

let carIcon = {
    path: carsvg,
    scale: 0.7,
    strokeColor: 'white',
    strokeWeight: 0.10,
    fillOpacity: 1,
    fillColor: '#404040',
    offset: '2%',
    anchor: new google.maps.Point(10, 25) // orig 10,50 back of car, 10,0 front of car, 10,25 center of car
};

和这样的标记对象

let carmarker = new google.maps.Marker({
    position: carLatLng,
    map: map,
    title: "Car",
    icon: carIcon,
    setMap: map
});

并说你想改变图标的​​颜色。为此，只需使用

carIcon.fillColor = '#008000';
carmarker.setIcon(carIcon);

这应该是您拥有的颜色十六进制代码。希望能帮助到你。此外，在这种情况下，图标应该是 SVG，以便颜色发生变化。