如何更改Google Maps标记的颜色?


167

我正在使用Google Maps API构建充满标记的地图,但我希望一个标记能与其他标记脱颖而出。我认为最简单的方法是将标记的颜色更改为蓝色,而不是红色。这是一件简单的事情,还是我必须以某种方式创建一个全新的图标?如果必须创建一个新图标,最简单的方法是什么?


2
你可能想从昨天检查这个帖子:stackoverflow.com/questions/2467720/...
丹尼尔·瓦萨洛

或者也许是更好的后stackoverflow.com/questions/7095574/...
Faizan

Answers:


45

由于不推荐使用v2地图,因此您可能对v3地图感兴趣:https//developers.google.com/maps/documentation/javascript/markers#simple_icons

对于v2地图:

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

您将拥有一组逻辑来执行所有“常规”引脚,而另一组逻辑使用定义的新标记来执行“特殊”引脚。


24
未来的读者注意事项:这是针对不推荐使用的Google Maps API v2。如果您使用的是v3,则需要在其他地方查找。
priestc

12
我单击了第一个链接ctrl-f,表示“颜色”:没有结果。可以在答案中添加更多详细信息以实际回答问题。OP特别询问是否可以更改颜色而不创建新图标。
qwertzguy

125

使用Google Maps API的第3版时,最简单的方法可能是获取自定义图标集,例如Benjamin Keen在此处创建的图标集:

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

如果将所有这些图标都放置在地图页面的同一位置,则只需在创建标记时使用适当的图标选项即可为标记着色:

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

这非常容易,这也是我目前正在从事的项目所使用的方法。


6
这个答案真棒。我为可接受的答案是V2而感到难过,但谢天谢地向下滚动获得了回报。谢谢!
2013年

我创建了一个不依赖图像的版本:stackoverflow.com/a/23163930/1689770
Jonathan

49

MapIconMaker:Google Maps v2的库

一种方法是使用MapIconMaker(失效链接)。这里有一个例子在这里(Deadlink中)。Google Maps默认图标的宽度为20px,高度为34px,因此您可以使用类似以下内容的方法进行模拟:

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”。另外,您可以在Marker上设置setImage,而不用创建带有新图标的新Marker。因此,如果您想突出显示某个功能,可以使用上面的功能进行如下操作:

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

StyledMarker:Google Maps v3的库

由于前一段时间V2被V3取代,我想我应该更新这个答案。我为自定义标记创建了一个库,可以在此处的V3实用程序库中找到该库(死链接)。它允许使用不同的颜色和形状,您也可以在标记上放置文本。它通过使用Google Charts API来工作,该API具有创建Google Maps类型标记的方法。如果您想直接使用Google Charts API,请随时查看源代码。

但是,关于该库的问题是,它需要为您定义这些标记图像的可点击区域,因此,例如,带有文本的较长气泡将具有您期望的可点击区域,例如本示例(失效链接)。


3
看来这仅与GMaps API v2兼容?
Tigraine

7
@Tigraine我实际上制作了一个用于v3的全新库,称为“ StyledMarker”,可以在v3实用程序库中找到:code.google.com/p/google-maps-utility-library-v3/wiki/Libraries
Bob

看看Sean McMains对v3的回答
smp7d 2011年

@Matt最初,是的,它只是v2。此后,我进行了更新,以包括v3解决方案
Bob

仅供参考,“ setImage”在Google Maps API v3中不是市场功能。“ setIcon”是要使用的正确函数。
尼克·博克

39

在此处输入图片说明 在此处输入图片说明 材料设计

现已编辑2019年3月,带有程序化图钉颜色,

纯JAVASCRIPT,无图像,支持标签

不再依赖不推荐使用的Charts API

    var pinColor = "#FFFFFF";
    var pinLabel = "A";

    // Pick your pin (hole or no hole)
    var pinSVGHole = "M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z";
    var labelOriginHole = new google.maps.Point(12,15);
    var pinSVGFilled = "M 12,2 C 8.1340068,2 5,5.1340068 5,9 c 0,5.25 7,13 7,13 0,0 7,-7.75 7,-13 0,-3.8659932 -3.134007,-7 -7,-7 z";
    var labelOriginFilled =  new google.maps.Point(12,9);


    var markerImage = {  // https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerLabel
        path: pinSVGFilled,
        anchor: new google.maps.Point(12,17),
        fillOpacity: 1,
        fillColor: pinColor,
        strokeWeight: 2,
        strokeColor: "white",
        scale: 2,
        labelOrigin: labelOriginFilled
    };
    var label = {
        text: pinLabel,
        color: "white",
        fontSize: "12px",
    }; // https://developers.google.com/maps/documentation/javascript/reference/marker#Symbol
    this.marker        = new google.maps.Marker({
        map: map.MapObject,
        //OPTIONAL: label: label,
        position: this.geographicCoordinates,
        icon: markerImage,
        //OPTIONAL: animation: google.maps.Animation.DROP,
    });

2
不幸的是,此功能已被弃用。这种情况令人失望,不推荐使用,而我使用的先前版本MapIconMaker已经不推荐使用。
zerowords 2014年

请注意,这不适用于https,仅适用于http。mm!
JoeGalind

@JoeGalind在获取颜色时是否有任何理由需要加密?我的意思是,我认为没有安全隐患,http除非它暴露了标头中我不知道的内容
Jonathan

@JonathanLeaders:这意味着您必须将域添加到项目的info.plist的允许列表中,因为它不是https调用。
JoeGalind

6
为2019年更新,不再被弃用
乔纳森


12

我找到的最简单的方法是使用BitmapDescriptorFactory.defaultMarker(),该文档甚至包含设置颜色的示例。从我自己的代码:

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

这是仅适用于Android,还是适用于网络浏览器?
乔纳森

@Jonathan-这仅适用于
android-


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.