动态更改 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);
      }
    });
}

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

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

Answer 1

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

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 以改变颜色。

Answer 2

这对我来说很好：

var marker = new google.maps.Marker({
        icon: new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"),
        position: results[0].geometry.location,
        map: document.map
            });

它们不必是硬编码的，但您必须使用 MarkerImage 的对象类型将 url 传递给。

您不能只传递十六进制颜色并期望地图 API 根据您刚刚选择的颜色制作新标记。通常所做的是喜欢您计划使用的每种颜色已经存在的图像 url。然后按照我向您展示的方式使用代码。