如何更改Google地图标记的颜色？

Question

我正在使用Google Maps API来构建一个包含标记的地图，但我希望一个标记可以与其他标记脱颖而出。我认为最简单的做法是将标记的颜色改为蓝色而不是红色。这是一件简单的事情吗？或者我必须以某种方式创建一个全新的图标？如果我必须创建一个新图标，那么最简单的方法是什么？

Answer 1

由于地图V2已被弃用，你可能感兴趣的V3地图：https://developers.google.com/maps/documentation/javascript/markers#simple_icons

对于V2地图：

http://code.google.com/apis/maps/documentation/overlays.html#Icons_overview

您将有一组逻辑做所有的“常规”销，另一个使用定义的新标记执行“特殊”引脚。

Answer 2

MapIconMaker：谷歌地图图书馆v2的

的一种方法是使用MapIconMaker。有一个例子here。谷歌地图默认的图标是20像素宽和34像素高度，所以你可以使用这样的模仿：

var newIcon = MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: "#0000FF", cornercolor:"#0000FF"}); 
var marker = new GMarker(map.getCenter(), {icon: newIcon}); 

你甚至可以把它包装一些功能，使事情变得更简单的自己：

function getIcon(color) { 
    return MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: color, cornercolor:color}); 
} 

这就是我个人用于创建所有标记的东西。我更喜欢选择改变一时兴起的颜色。

更新：默认图标的十六进制颜色是“＃FE7569”。此外，您可以在标记上设置图像，而不是使用新图标创建新标记。所以，如果你想有一个功能来突出你可以像这样的东西去，用上面的功能：

function highlightMarker(marker, highlight) { 
    var color = "#FE7569"; 
    if (highlight) { 
     color = "#0000FF"; 
    } 
    marker.setImage(getIcon(color).image); 
} 

StyledMarker：谷歌地图图书馆V3

由于V2是由V3较早前我想更换我应该更新这个答案。我在V3 Utility Library here上创建了自定义标记库。它允许使用不同的颜色和形状，并且您还可以在标记上放置文字。它的工作原理是使用Google Charts API，该API具有创建Google Maps类型标记的方法。如果您想直接使用Google Charts API，请随时查看源代码。

但是，关于该库的事情是，它需要为您定义这些标记图像的可点击区域，因此，例如，带有文本的较长气泡将具有期望的可点击区域，如this example。

Answer 3

随着谷歌地图API，这样做可能是通过抓住一个自定义的图标集，像本杰明·基恩已经在这里创造了一个最简单的方法第3版：

http://www.benjaminkeen.com/?p=105

如果你把所有的在同一地点的地图页面的图标，你可以简单地通过使用相应的图标选项创建时，着色标记：

var beachMarker = new google.maps.Marker({ 
    position: myLatLng, 
    map: map, 
    icon: 'brown_markerA.png' 
}); 

这是超级简单，是我使用的方法为我正在工作的项目目前。

Answer 4

就我个人而言，我认为Google Charts API生成的图标看起来不错，而且很容易动态定制。

见我上Google Maps API 3 - Custom marker color for default (dot) marker

Answer 5

答案，我发现最简单的方法是使用BitmapDescriptorFactory.defaultMarker（）的documentation甚至有设置颜色的例子。从我自己的代码：

MarkerOptions marker = new MarkerOptions() 
      .title(formatInfo(data)) 
      .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE)) 
      .position(new LatLng(data.getLatitude(), data.getLongitude())) 

Answer 6

您不需要任何用于Google Maps v3的自定义库。

var pinColor = "FE7569"; 
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor, 
    new google.maps.Size(21, 34), 
    new google.maps.Point(0,0), 
    new google.maps.Point(10, 34)); 
var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow", 
    new google.maps.Size(40, 37), 
    new google.maps.Point(0, 0), 
    new google.maps.Point(12, 35)); 
var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(0,0), 
      map: map, 
      icon: pinImage, 
      shadow: pinShadow 
     }); 

从Matt Burns 此作品为2014年10月，但已被弃用。