Question

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

我查看了以下所有主题和Google API：

所有这些都有他们想要使用的标记图标的链接或者已经硬编码到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

这对我来说很好：

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传递给。

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

Answer 2

因此，如果您已经有了十六进制代码，并且您有一个类似于此的图标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，以便更改颜色。

动态更改Google地图图标/标记的颜色

2 个答案: