JAVASCRIPT，更改谷歌地图标记颜色(Javascript, Change google ma

我可以知道一种方法来改变通过JavaScript的谷歌地图标记的颜色..我在这个新的任何帮助，将不胜感激，谢谢。

我用下面的代码来创建一个标记

 marker = new google.maps.Marker({
     position: new google.maps.LatLng(locations[i][1], 
     locations[i][2]),
     animation: google.maps.Animation.DROP,
     map: map
 });

Answer 1:

在谷歌地图API V3则可以尝试更改标记图标。 例如，对于绿色图标使用：

marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')

或作为标记INIT的一部分：

marker = new google.maps.Marker({
    icon: 'http://...'
});

其他颜色：

• http://maps.google.com/mapfiles/ms/icons/blue-dot.png
• http://maps.google.com/mapfiles/ms/icons/red-dot.png

等等。

Answer 2:

您可以使用strokeColor属性：

var marker = new google.maps.Marker({
    id: "some-id",
    icon: {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
        strokeColor: "red",
        scale: 3
    },
    map: map,
    title: "some-title",
    position: myLatlng
});

请参见本页面的其他可能性。

Answer 3:

您可以使用此代码，它工作正常。

 var pinImage = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/009900/");

 var marker = new google.maps.Marker({
            position: yourlatlong,
            icon: pinImage,
            map: map
        });

看到这里的例子

Answer 4:

你可以使用谷歌图表API，并生成与上飞的RGB代码的任何颜色：

例如：标记与#ddd颜色：

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|ddd

包括与上面所述

 var marker = new google.maps.Marker({
    position: marker,
    title: 'Hello World',
    icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|ddd'
});

Answer 5:

我有4艘在一个单一的地图设置，所以我用的是谷歌开发者范例，然后扭曲它

https://developers.google.com/maps/documentation/javascript/examples/icon-complex

在功能波纹管我设置3更多的色彩选择：

function setMarkers(map, locations) {
...
var image = {
    url: 'img/bullet_amarelo.png',
    // This marker is 20 pixels wide by 32 pixels tall.
    size: new google.maps.Size(40, 40),
    // The origin for this image is 0,0.
    origin: new google.maps.Point(0,0),
    // The anchor for this image is the base of the flagpole at 0,32.
    anchor: new google.maps.Point(0, 40)
  };
  var image1 = {
            url: 'img/bullet_azul.png',
            // This marker is 20 pixels wide by 32 pixels tall.
            size: new google.maps.Size(40, 40),
            // The origin for this image is 0,0.
            origin: new google.maps.Point(0,0),
            // The anchor for this image is the base of the flagpole at 0,32.
            anchor: new google.maps.Point(0, 40)
          };
  var image2 = {
          url: 'img/bullet_vermelho.png',
          // This marker is 20 pixels wide by 32 pixels tall.
          size: new google.maps.Size(40, 40),
          // The origin for this image is 0,0.
          origin: new google.maps.Point(0,0),
          // The anchor for this image is the base of the flagpole at 0,32.
          anchor: new google.maps.Point(0, 40)
        };
  var image3 = {
          url: 'img/bullet_verde.png',
          // This marker is 20 pixels wide by 32 pixels tall.
          size: new google.maps.Size(40, 40),
          // The origin for this image is 0,0.
          origin: new google.maps.Point(0,0),
          // The anchor for this image is the base of the flagpole at 0,32.
          anchor: new google.maps.Point(0, 40)
        };
...
}

而在FOR波纹管我为每个船上一个颜色：

for (var i = 0; i < locations.length; i++) {
...
    if (i==0) var imageV=image;
    if (i==1) var imageV=image1;
    if (i==2) var imageV=image2;
    if (i==3) var imageV=image3;
...
# remember to change icon: image to icon: imageV
}

最终的结果是：

http://www.mercosul-line.com.br/site/teste.html

Answer 6:

我建议使用谷歌API图表 ，因为你可以指定文本，文本颜色，填充颜色和轮廓颜色，全部采用十六进制颜色代码，例如＃FF0000红色。 可以按如下方式调用它：

function getIcon(text, fillColor, textColor, outlineColor) {
  if (!text) text = '•'; //generic map dot
  var iconUrl = "http://chart.googleapis.com/chart?cht=d&chdp=mapsapi&chl=pin%27i\\%27[" + text + "%27-2%27f\\hv%27a\\]h\\]o\\" + fillColor + "%27fC\\" + textColor + "%27tC\\" + outlineColor + "%27eC\\Lauto%27f\\&ext=.png";
  return iconUrl;
}

然后，当你创建你的标志，你刚才设置的图标属性正因为如此，在myColor变量是十六进制值（减去井号）：

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(locations[i][1], locations[i][2]),
  animation: google.maps.Animation.DROP,
  map: map,
  icon: getIcon(null, myColor, myColor2, myColor3)
});

您可以使用http://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=•|FF0000 ，这是一个有点容易解释，作为备用网址，如果你只需要设置文本和填充颜色。

khurram的回答是指第三方站点重定向到谷歌图表API。 这意味着，如果这个人记下你大清洗他们的服务器。 我更喜欢具有谷歌API提供了灵活性，以及​​直接将谷歌的可靠性。 只要确保你的每一种颜色的指定值，否则将无法正常工作。

Answer 7:

我真的很喜欢通过Bahadır鸭肝，不同之处我不依赖于有限的一组由谷歌或外部API提供给我的生成标记图标图标喜欢的答案。 这里是初始溶液：

 var marker = new google.maps.Marker({ id: "some-id", icon: { path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, strokeColor: "red", scale: 3 }, map: map, title: "some-title", position: myLatlng }); 

这里是我的改进方案：

var marker = new google.maps.Marker({
            position: myLatlng,
            icon:{
                path: 'm 12,2.4000002 c -2.7802903,0 -5.9650002,1.5099999 -5.9650002,5.8299998 0,1.74375 1.1549213,3.264465 2.3551945,4.025812 1.2002732,0.761348 2.4458987,0.763328 2.6273057,2.474813 L 12,24 12.9825,14.68 c 0.179732,-1.704939 1.425357,-1.665423 2.626049,-2.424188 C 16.809241,11.497047 17.965,9.94 17.965,8.23 17.965,3.9100001 14.78029,2.4000002 12,2.4000002 Z',
                fillColor: '#00FF00',
                fillOpacity: 1.0,
                strokeColor: '#000000',
                strokeWeight: 1,
                scale: 2,
                anchor: new google.maps.Point(12, 24),
            },
        });

我想要一个特定的图钉图标，所以我去了，做一个使用Inkscape，然后打开SVG文件和复制的SVG路径进入路径转换的代码，但是这可与您放入的“路径”属性的任何SVG路径图标对象。

下面是结果：

Answer 8:

为了所接受的答案扩展，您可以创建自定义MarkerImages在使用API的任何颜色http://chart.googleapis.com

除了改变颜色，这也改变标志形状，其可以是不想要的。

const marker = new window.google.maps.Marker(
        position: markerPosition,
        title: markerTitle,
        map: map)
marker.addListener('click', () => marker.setIcon(changeIcon('00ff00'));)

const changeIcon = (newIconColor) => {
    const newIcon = new window.google.maps.MarkerImage(
        `http://chart.googleapis.com/chart?                                      
        chst=d_map_spin&chld=1.0|0|${newIconColor}|60|_|%E2%80%A2`,
        new window.google.maps.Size(21, 34),
        new window.google.maps.Point(0, 0),
        new window.google.maps.Point(10, 34),
        new window.google.maps.Size(21,34)
    );
    return newIcon
}

来源： 在谷歌免费udacity当然地图API

Answer 9:

VAR map_marker = $（ “地图标记物。 ”）儿童（“ IMG ”）ATTR（“ SRC”）VAR pinImage =新google.maps.MarkerImage（map_marker）。

     var marker = new google.maps.Marker({
      position: uluru,
      map: map,
      icon: pinImage
    });
  }

文章来源: Javascript, Change google map marker color