Javascript,更改Google Map标记颜色


72

我可以通过Javascript更改Google Map标记颜色的方法吗。

我使用以下代码创建了一个标记

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

Answers:


170

在Google Maps API v3中,您可以尝试更改标记图标。例如,用于绿色图标:

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

或作为标记初始化的一部分:

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

其他颜色:

等等。


非常感谢您:)这就是我一直在寻找的东西:)我可能知道吗,我该在显示实例化标记的地方使用它吗?还是将其单独定义在外面?:)
Hasitha Shan 2012年

两者都可以。您可以添加icon属性并进行设置,也可以使用setIcon。我将对此添加注释。
jsalonen 2012年

到目前为止,所有stackoverflow中的最佳答案!
digz6666 2014年

1
这些图标似乎不带有字母。找到这些在 maps.google.com/mapfiles/marker_green.pngmaps.google.com/mapfiles/marker_greenA.png
tempranova

有没有办法查看所有图标?我试图起飞的blue-dot,并得到了404
马特西湖

40

您可以使用该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
});

请参阅此页面以了解其他可能性。


14

您可以使用此代码,效果很好。

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

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

请参阅此处的示例


13

您可以使用Google Chart 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'
});

做到了,可以实时生成带有RGB代码的任何颜色
深度3015年

我正在为标记iconarchive.com使用这个非常好的图标库。 它具有一些预定义的大小,这对于快速设计非常有用。
guido _nhcol.com.br_

看起来非常强大而灵活的可惜这个API在3月被关闭,2019 developers.google.com/chart/image/docs/gallery/dynamic_icons
WLF

8

我非常喜欢BahadırYağan给出的答案,但我不喜欢依靠Google提供的有限图标集或外部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路径放入“图标对象。

结果如下:

在此处输入图片说明


3

我在一张地图上设置了4艘船,所以我使用Google Developers示例,然后将其扭曲

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


3

我建议使用Google Charts 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;
}

然后,在创建标记时,只需设置icon属性,其中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如果您只需要设置文本和填充颜色,则可以使用,它更容易破译,作为备用URL。

khurram的答案是指向重定向到Google Charts API的第三方网站。这意味着,如果该人关闭了他们的服务器,您就会被水管。我更喜欢Google API提供的灵活性以及直接转到Google的可靠性。只需确保为每种颜色指定一个值,否则将不起作用。


不幸的是这个API是2019年3月见developers.google.com/chart/image/docs/gallery/dynamic_icons关闭
WLF

1

要扩展接受的答案,您可以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
}

资料来源:Google Maps API上的免费udacity课程


-1

var map_marker = $(“。map-marker”)。children(“ img”)。attr(“ src”)var pinImage = new google.maps.MarkerImage(map_marker);

     var marker = new google.maps.Marker({
      position: uluru,
      map: map,
      icon: pinImage
    });
  }
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.