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

Question

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

Answer 1

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

这非常简单,是我正在使用的方法,目前正在进行的项目.

Answer 2

MapIconMaker:Google Maps v2的库

一种方法是使用MapIconMaker.这里有一个例子在这里.Google地图默认图标的宽度为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 Utility Library中找到.它允许不同的颜色和形状,您也可以在标记上放置文本.它的工作原理是使用Google Charts API,该API具有创建Google Maps类型标记的方法.如果您更愿意直接使用Google Charts API,请随时查看源代码.

然而,关于该库的事情是,它负责为您定义这些标记图像的可点击区域,因此,例如,带有文本的较长气泡将具有可预期的可点击区域,如此示例.

Answer 3

由于不推荐使用maps 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 4

(已弃用)Google Maps v3不需要任何自定义库.

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

来自Matt Burns 这是截至2014年10月的作品,但已弃用.

Answer 5

就个人而言,我认为Google Charts API生成的图标看起来很棒,并且易于动态自定义.

请参阅我在Google Maps API 3上的答案- 默认(点)标记的自定义标记颜色

Answer 6

2023 解决方案：高级标记

嗨，Google 地图 JavaScript API 开发人员。

Google 最近发布了新的Advanced Markers，它有一些非常酷的功能，包括自定义默认标记的颜色、字形、字形颜色和比例等。而且我们一直在努力提高性能。

新的API现已全面推出，我们期待您的反馈！

Answer 7

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

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