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

StackOverflow https://stackoverflow.com/questions/2472957

  •  20-09-2019
  •  | 
  •  

题

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

有帮助吗？

解决方案

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

有关V2地图：

http://code.google.com/apis/maps/文档/ overlays.html＃Icons_overview

您将有一组逻辑的完成所有的“常规”管脚，而另一种不使用所定义的新标记在“特殊”销（一个或多个）。

其他提示

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

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

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

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

这是超级简单，而且是我使用我目前从事的项目的方法。

MapIconMaker：谷歌地图图书馆V2

的一种方法是使用 MapIconMaker 。这里有一个例子这里。谷歌地图默认的图标是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”。此外，您还可以setImage一个标记，而不是一个新的图标创建一个新的标记。所以，如果你想有一个功能来突出你可以像这样的东西去，用上面的功能：

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

StyledMarker：谷歌地图V3

库

由于V2是由V3前的某个时候，我想我应该更新这个答案所取代。我创建了自定义标记库，可在V3实用工具库中找到这里。它允许不同的颜色和形状，并且可以放置在标记文字以及。它的工作原理是使用具有创建谷歌地图类型的标记方法谷歌图表API。随意看看源代码，如果你宁愿直接使用谷歌API图表

有关图书馆的事情，但问题在于，它需要照顾定义你的这些标记图像的点击区域，因此，例如，用文字较长的泡沫将具有可点击区域的一个希望，像的该示例中。

“在这里输入的形象描述” 材料设计

<强> EDITED 2019年3月立即通过程序销颜色，

<强>纯JavaScript，NO IMAGES，支持多层标签

不再依赖于弃用图表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,
    });

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

请参阅我的回答 Google Maps API 3 - 默认（点）标记的自定义标记颜色

我发现的最简单的方法是使用 BitmapDescriptorFactory.defaultMarker() 文档 甚至有一个设置颜色的例子。从我自己的代码来看：

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

要自定义标记，你可以从这个在线工具来完成： https://materialdesignicons.com/

在你的情况，你想的地图标记的是可以在这里找到：的 https://materialdesignicons.com/icon/map-marker ，哪些是你可以在网上定制。

如果您只是想更改默认的红色蓝，你可以加载该图标：的 http://maps.google.com/mapfiles/ms/icons/blue-dot.png

它在这个线程被提及： https://stackoverflow.com/a/32651327/6381715

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top