Javascript，更改google地图标记颜色

我可以通过Javascript了解一种更改Google Map标记颜色的方法..我对此有所了解，任何帮助都将非常感谢，谢谢。Javascript，更改google地图标记颜色

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

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

来源

2012-06-16 Hasitha Shan

144

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

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

或者作为标记INIT的一部分：

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

其他颜色：

等等

来源

2012-06-16 14:06:05 jsalonen

非常谢谢:)这就是我一直在寻找:)可我知道，我做这个应用的场所内，其中i实例标记，因为我已经表演或它分开定义之外？ :) –

这两个工作。您可以添加'icon'属性并设置它，或者使用'setIcon'。我会补充一点关于这个的。 – jsalonen

非常感谢你的帮助:) –

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

其他可能性见this page。

来源

2012-12-23 17:14:26

感谢那惊人的 –

你可以使用这段代码，它工作正常。

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

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

see Example here

来源

2013-11-19 09:54:19 khurram

我有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) 
     }; 
... 
}

d在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

来源

2015-07-15 20:37:09 LuyRamone

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

然后，当您创建标记您刚才设置的图标属性正因为如此，在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的可靠性。只要确保您为每种颜色指定一个值，否则它将不起作用。

来源

2016-11-10 17:11:19 Mideus

可以使用谷歌图表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' 
});

指出

来源

2017-02-10 04:47:06

真的可以，**生成任何颜色与rgb代码在飞行** –

我使用这个很好的图标库标记 http： //www.archarchive.com/ 它有一些预定义的大小，这对快速设计非常有用。 –

-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 
    }); 
    }

来源

2017-11-01 08:41:06

Javascript，更改google地图标记颜色

回答

相关问题