Google Maps API 3-默认(点)标记的自定义标记颜色


282

我见过很多与此类似的其他问题(在这里在这里这里),但是他们都接受了不能解决我问题的答案。我发现该问题的最佳解决方案是StyledMarker库,该库可以让您定义标记的自定义颜色,但是我无法使用它来使用默认标记(使用Google Maps搜索时获得的一种)中间的一个点),它似乎只是在标记中带有字母或特殊图标。

Answers:


533

您可以使用网址从Google Charts API动态请求图标图像:

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569

看起来像这样:默认颜色图像为21x34像素,针尖位于位置10,34

而且,您还需要一个单独的阴影图像(这样它就不会与附近的图标重叠):

http://chart.apis.google.com/chart?chst=d_map_pin_shadow

看起来像这样:在此处输入图片说明图像为40x37像素,针尖位于位置12,35

构造MarkerImage时,需要相应地设置大小和锚点:

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

只需将“ FE7569”替换为您想要的颜色代码即可。例如:默认颜色绿色黄色

归功于Jack B Nimble的灵感;)


36
虽然我真的很喜欢这个答案,但已弃用了与信息图表有关的Google Charts API (您在上面提供的链接)。
johntrepreneur

3
不知道这是否是新的,但是您可以添加_withshadow来自动构建阴影。例子,chart.apis.google.com/…
Lionel Chan

@LionelChan,可以,但是不能完全对齐,它还会重叠在其他图标的顶部。您要确保所有阴影都在图钉之前绘制。
马特

1
@mattburns好吧,对于某些人来说,这可能是个更简单的解决方案,为什么不这样做;)
Lionel Chan

1
从2019年3月14日起,不再使用这种创建标记的方法。它将不再起作用:error502
Jonny

372

如果您使用Google Maps API v3,则可以使用setIcon例如

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

或作为标记初始化的一部分:

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

其他颜色:

使用以下代码段更新具有不同颜色的默认标记。

(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)

50
太好了 如果您需要更多图标和颜色选择,请在以下位置找到它们:sites.google.com/site/gmapsdevelopment
Johnny Oshika 2013年

121

这是使用Gooogle Maps API本身的不错的解决方案。没有外部服务,没有额外的库。并启用自定义形状以及多种颜色和样式。该解决方案使用矢量标记,googlemaps api将其称为Symbols

除了少数几个有限的预定义符号外,您还可以通过指定SVG路径字符串(Spec)来制作任何颜色的任何形状。

要使用它,无需将“ icon”标记选项设置为图像URL,而是将其设置为包含符号选项的字典。例如,我设法制作了一个与标准标记非常相似的符号:

function pinSymbol(color) {
    return {
        path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 2,
        scale: 1,
   };
}

var marker = new google.maps.Marker({
   map: map,
   position: new google.maps.LatLng(latitude, longitude),
   icon: pinSymbol("#FFF"),
});

矢量标记

如果您小心地将形状关键点保持在0,0,则不必定义标记图标居中参数。另一个路径示例,没有点的相同标记:

    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',

无点矢量标记

在这里,您有一个非常简单且难看的彩色标志:

    path: 'M 0,0 -1,-2 V -43 H 1 V -2 z M 1,-40 H 30 V -20 H 1 z',

矢量标志

您还可以使用可视工具(例如Inkscape)(GNU-GPL,多平台)创建路径。一些有用的提示:

  • Google API只接受一条路径,因此您必须将任何其他对象(正方形,cercle ...)转换为一条路径,并将它们作为单个路径加入。路径菜单中的两个命令。
  • 要将路径移至(0,0),请进入“路径编辑”模式(F2),选择所有控制节点并拖动它们。使用F1移动对象,不会更改路径节点坐标。
  • 要确保参考点位于(0,0),可以单独选择它,并在顶部工具栏上手动编辑坐标。
  • 保存为XML的SVG文件后,使用编辑器将其打开,查找svg:path元素并复制'd'属性的内容。

4
这是一个很好的答案。如果有人想出一条看起来像真正的图钉的路径,那将是一个很好的答案
mkoryak 2014年

2
此解决方案比从URL加载固定图片更好。因为,如果单个地图中有多个图钉,则会增加地图加载时间。
Ahsan 2014年

1
@mkoryak我添加了一些提示,说明如何使用诸如inkscape之类的图形工具自己绘制这些路径。如果要匹配任何现有的PNG,只需将其导入inkscape并将其用作路径的参考。
vokimon 2014年

可以将除点以外的其他东西放到气球中吗?
罗斯·罗杰斯

1
你画 唯一的缺点是引脚和点都应位于同一路径上。这意味着该点不是一个点而是一个孔。无论您使用哪种形状,该点都会是具有该形状的销钉形状的孔。(您可以看穿它)将几种颜色的形状与不同的颜色结合起来会很好,但是据我所知,它只是支持一条(不连续的)路径。
vokimon,2015年

14

好吧,我可以通过StyledMarker获得的最接近的东西是这个

中间的子弹虽然不如默认子弹大。StyledMarker类仅构建此URL并要求google api创建标记

类使用示例中,使用“%E2%80%A2”作为文本,如下所示:

var styleMaker2 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{text:"%E2%80%A2"},styleIconClass),position:new google.maps.LatLng(37.263477473067, -121.880502070713),map:map});

您将需要修改StyledMarker.js来注释掉以下行:

  if (text_) {
    text_ = text_.substr(0,2);
  }

因为这会将文本字符串修剪为2个字符。

或者,您可以基于默认图片创建具有所需颜色的自定义标记图像,并使用以下代码覆盖默认标记:

marker = new google.maps.Marker({
  map:map,
  position: latlng,
  icon: new google.maps.MarkerImage(
    'http://www.gettyicons.com/free-icons/108/gis-gps/png/24/needle_left_yellow_2_24.png',
    new google.maps.Size(24, 24),
    new google.maps.Point(0, 0),
    new google.maps.Point(0, 24)
  )
});

感谢您的答复,但我已经尝试过使用ascii字符重新创建该点,但是您无法使它看起来相同,而且我也不想解决明显不同的问题-它看起来确实很不专业。是的,自定义标记图片一直是我当前的解决方法(我从此处获取了默认的红色图钉:maps.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png,我已在GIMP中打开并使用了彩色工具),但这也不完美。
jackocnr

我接受这个答案,因为它是唯一的答案,我想没有其他解决方案了。
jackocnr

抱歉,我帮不上忙。有时,唯一的答案是不太理想的答案。
Jack B Nimble

12

我扩展了vokimon的回答,使更改其他属性也更加方便。

function customIcon (opts) {
  return Object.assign({
    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
    fillColor: '#34495e',
    fillOpacity: 1,
    strokeColor: '#000',
    strokeWeight: 2,
    scale: 1,
  }, opts);
}

用法:

marker.setIcon(customIcon({
  fillColor: '#fff',
  strokeColor: '#000'
}));

或在定义新标记时:

const marker = new google.maps.Marker({
  position: {
    lat: ...,
    lng: ...
  },
  icon: customIcon({
    fillColor: '#2ecc71'
  }),
  map: map
});

11

嗨,您可以将图标用作SVG并设置颜色。看到这个代码

/*
 * declare map and places as a global variable
 */
var map;
var places = [
    ['Place 1', "<h1>Title 1</h1>", -0.690542, -76.174856,"red"],
    ['Place 2', "<h1>Title 2</h1>", -5.028249, -57.659052,"blue"],
    ['Place 3', "<h1>Title 3</h1>", -0.028249, -77.757507,"green"],
    ['Place 4', "<h1>Title 4</h1>", -0.800101286, -76.78747820,"orange"],
    ['Place 5', "<h1>Title 5</h1>", -0.950198, -78.959302,"#FF33AA"]
];
/*
 * use google maps api built-in mechanism to attach dom events
 */
google.maps.event.addDomListener(window, "load", function () {

    /*
     * create map
     */
    var map = new google.maps.Map(document.getElementById("map_div"), {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    });

    /*
     * create infowindow (which will be used by markers)
     */
    var infoWindow = new google.maps.InfoWindow();
    /*
     * create bounds (which will be used auto zoom map)
     */
    var bounds = new google.maps.LatLngBounds();

    /*
     * marker creater function (acts as a closure for html parameter)
     */
    function createMarker(options, html) {
        var marker = new google.maps.Marker(options);
        bounds.extend(options.position);
        if (html) {
            google.maps.event.addListener(marker, "click", function () {
                infoWindow.setContent(html);
                infoWindow.open(options.map, this);
                map.setZoom(map.getZoom() + 1)
                map.setCenter(marker.getPosition());
            });
        }
        return marker;
    }

    /*
     * add markers to map
     */
    for (var i = 0; i < places.length; i++) {
        var point = places[i];
        createMarker({
            position: new google.maps.LatLng(point[2], point[3]),
            map: map,
            icon: {
                path: "M27.648 -41.399q0 -3.816 -2.7 -6.516t-6.516 -2.7 -6.516 2.7 -2.7 6.516 2.7 6.516 6.516 2.7 6.516 -2.7 2.7 -6.516zm9.216 0q0 3.924 -1.188 6.444l-13.104 27.864q-0.576 1.188 -1.71 1.872t-2.43 0.684 -2.43 -0.684 -1.674 -1.872l-13.14 -27.864q-1.188 -2.52 -1.188 -6.444 0 -7.632 5.4 -13.032t13.032 -5.4 13.032 5.4 5.4 13.032z",
                scale: 0.6,
                strokeWeight: 0.2,
                strokeColor: 'black',
                strokeOpacity: 1,
                fillColor: point[4],
                fillOpacity: 0.85,
            },
        }, point[1]);
    };
    map.fitBounds(bounds);
});
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map_div" style="height: 400px;"></div>


6

从google maps API的3.11版本开始,该Icon对象替换MarkerImage。Icon支持与MarkerImage相同的参数。我什至发现它更加简单。

一个示例可能如下所示:

var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

有关更多信息,请访问此网站


1
不是这个问题的答案,应该做评论
mkoryak 2014年

4

Internet Explorer中此解决方案不适用于ssl。

可以在控制台中看到以下错误:

SEC7111:HTTPS安全受到损害这个

解决方法:由于这里的一位用户建议将URL路径替换为 chart.apis.google.comchart.googleapis.com以避免SSL错误。


3

正如其他人提到的那样,vokimon的答案很好,但是不幸的是,当同时有许多基于SymbolPath / SVG的标记时,Google Maps的速度会变慢。

看起来使用数据URI的速度要快得多,大约与PNG差不多。

另外,由于它是完整的SVG文档,因此可以对圆点使用适当的填充圆。路径已修改,因此不再偏移到左上角,因此需要定义锚点。

这是生成这些标记的修改后的版本:

var coloredMarkerDef = {
    svg: [
        '<svg viewBox="0 0 22 41" width="22px" height="41px" xmlns="http://www.w3.org/2000/svg">',
            '<path d="M 11,41 c -2,-20 -10,-22 -10,-30 a 10,10 0 1 1 20,0 c 0,8 -8,10 -10,30 z" fill="{fillColor}" stroke="#ffffff" stroke-width="1.5"/>',
            '<circle cx="11" cy="11" r="3"/>',
        '</svg>'
    ].join(''),
    anchor: {x: 11, y: 41},
    size: {width: 22, height: 41}
};

var getColoredMarkerSvg = function(color) {
    return coloredMarkerDef.svg.replace('{fillColor}', color);
};

var getColoredMarkerUri = function(color) {
    return 'data:image/svg+xml,' + encodeURIComponent(getColoredMarkerSvg(color));
};

var getColoredMarkerIcon = function(color) {
    return {
        url: getColoredMarkerUri(color),
        anchor: coloredMarkerDef.anchor,
        size: coloredMarkerDef.size,
        scaledSize: coloredMarkerDef.size
    }
};

用法:

var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(latitude, longitude),
    icon: getColoredMarkerIcon("#FFF")
});

缺点是,与PNG图像很像,整个矩形都是可点击的。从理论上讲,跟踪SVG路径并生成MarkerShape多边形并不是很困难。


2

您可以使用此代码,效果很好。

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

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

2

基于符号的标记(其路径绘制轮廓)与中间的“●”字符相结合。您可以根据需要用其他文本(“ A”,“ B”等)替换该点。

此函数返回具有给定文本(如果有),文本颜色和填充颜色的标记的选项。它使用文本颜色作为轮廓。

function createSymbolMarkerOptions(text, textColor, fillColor) {
    return {
        icon: {
            path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
            fillColor: fillColor,
            fillOpacity: 1,
            strokeColor: textColor,
            strokeWeight: 1.8,
            labelOrigin: { x: 0, y: -30 }
        },
        label: {
            text: text || '●',
            color: textColor
        }
    };
}

1

我尝试了两种方法来创建自定义google map标记,canvg.js使用的此运行代码是与浏览器的最佳兼容性。

var marker;
var CustomShapeCoords = [16, 1.14, 21, 2.1, 25, 4.2, 28, 7.4, 30, 11.3, 30.6, 15.74, 25.85, 26.49, 21.02, 31.89, 15.92, 43.86, 10.92, 31.89, 5.9, 26.26, 1.4, 15.74, 2.1, 11.3, 4, 7.4, 7.1, 4.2, 11, 2.1, 16, 1.14];

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {
      lat: 59.325,
      lng: 18.070
    }
  });
  var markerOption = {
    latitude: 59.327,
    longitude: 18.067,
    color: "#" + "000",
    text: "ha"
  };
  marker = createMarker(markerOption);
  marker.setMap(map);
  marker.addListener('click', changeColorAndText);
};

function changeColorAndText() {
  var iconTmpObj = createSvgIcon( "#c00", "ok" );
  marker.setOptions( {
                icon: iconTmpObj
            } );
};

function createMarker(options) {
  //IE MarkerShape has problem
  var markerObj = new google.maps.Marker({
    icon: createSvgIcon(options.color, options.text),
    position: {
      lat: parseFloat(options.latitude),
      lng: parseFloat(options.longitude)
    },
    draggable: false,
    visible: true,
    zIndex: 10,
    shape: {
      coords: CustomShapeCoords,
      type: 'poly'
    }
  });

  return markerObj;
};

function createSvgIcon(color, text) {
  var div = $("<div></div>");

  var svg = $(
    '<svg width="32px" height="43px"  viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">' +
    '<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>' +
    '<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>' +
    '<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>' +
    '</svg>'
  );
  div.append(svg);

  var dd = $("<canvas height='50px' width='50px'></cancas>");

  var svgHtml = div[0].innerHTML;

  //todo yao gai bu dui
  canvg(dd[0], svgHtml);

  var imgSrc = dd[0].toDataURL("image/png");
  //"scaledSize" and "optimized: false" together seems did the tricky ---IE11  &&  viewBox influent IE scaledSize
  //var svg = '<svg width="32px" height="43px"  viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">'
  //    + '<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>'
  //    + '<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>'
  //    + '<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>'
  //    + '</svg>';
  //var imgSrc = 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg);

  var iconObj = {
    size: new google.maps.Size(32, 43),
    url: imgSrc,
    scaledSize: new google.maps.Size(32, 43)
  };

  return iconObj;
};
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Your Custom Marker </title>
  <style>
    /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
    #map {
      height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>
    <script src="https://canvg.github.io/canvg/canvg.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
</body>

</html>


1

我尝试了很长时间,以改进vokimon的绘制标记,使其更类似于Google Maps(并取得了很大的成功)。这是我得到的代码:

let circle=true;

path = 'M 0,0  C -0.7,-9 -3,-14 -5.5,-18.5 '+   
'A 16,16 0 0,1 -11,-29 '+  
'A 11,11 0 1,1 11,-29 '+  
'A 16,16 0 0,1 5.5,-18.5 '+  
'C 3,-14 0.7,-9 0,0 z '+  
['', 'M -2,-28 '+  
'a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0'][new Number(circle)];   

我也将其缩放为0.8。


0

将其更改为chart.googleapis.com作为路径,否则SSL将不起作用


0

使用swift和Google Maps Api v3,这是我最简单的方法:

icon = GMSMarker.markerImageWithColor(UIColor.blackColor())

希望它能帮助某人。


0

这些是自定义的圆形标记

小红色:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NUlH5v9rF5f+ZoCAwHaig8B8oPhOmKC1NU/P//7Q0DByrqgpSGAtSdOCAry9WRXt9fECK9oIUPXwYFYVV0e2ICJCi20SbFAuyG5uiECUlkKIQmOPng3y30d0d7Lt1bm4w301jQAOgcNoIDad1yOEEAFm9fSv/VqtJAAAAAElFTkSuQmCC

黄色小:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NijL7v3p1+v8zZ6rAdGCg4X+g+EyYorS0NNv////PxMCxsRYghbEgRQcOHCjGqmjv3kKQor0gRQ8fPmzHquj27WaQottEmxQLshubopAQI5CiEJjj54N8t3FjFth369ZlwHw3jQENgMJpIzSc1iGHEwB8p5qDBbsHtAAAAABJRU5ErkJggg==

小绿:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiElEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81izL7n746/X/VmSowbRho+B8oPhOmKM02zfb/TCzQItYCpDAWpOhA8YFirIoK9xaCFO0FKXrY/rAdq6Lm280gRbeJNikWZDc2RUYhRiBFITDHzwf5LmtjFth3GesyYL6bxoAGQOG0ERpO65DDCQDX7ovT++K9KQAAAABJRU5ErkJggg==

small_blue:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81M4v6n56++n9V1RkwbWgY+B8oPhOmKM3WNu3/zJn/MbCFRSxIYSxI0YHi4gNYFRUW7gUp2gtS9LC9/SFWRc3Nt0GKbhNtUizIbmyKjIxCQIpCYI6fD/JdVtZGsO8yMtbBfDeNAQ2AwmkjNJzWIYcTAMk+i9OhipcQAAAAAElFTkSuQmCC

small_purple:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NMov6vzp99f8zVWfAdKBh4H+g+EyYorQ027T//2f+x8CxFrEghbEgRQcOFB/Aqmhv4V6Qor0gRQ8ftj/Equh2822QottEmxQLshubohCjEJCiEJjj54N8tzFrI9h36zLWwXw3jQENgMJpIzSc1iGHEwBt95qDejjnKAAAAABJRU5ErkJggg==

它们是9x9 png图像。

一旦它们出现在您的页面上,您就可以将它们拖走,您将获得实际的png文件。


0

您也可以使用颜色代码。

 const marker: Marker = this.map.addMarkerSync({
    icon: '#008000',
    animation: 'DROP',
    position: {lat: 39.0492127, lng: -111.1435662},
    map: this.map,
 });

0

有时候,一些非常简单的事情,可以回答复杂的问题。我并不是说上述任何答案都是不正确的,但我只是适用,它可以像这样简单地完成:

我知道这个问题很旧,但是如果有人只想更改图钉或标记的颜色,请查看文档:https : //developers.google.com/maps/documentation/android-sdk/marker

添加标记时,只需设置图标属性即可:

GoogleMap gMap;
LatLng latLng;
....
// write your code...
....
gMap.addMarker(new MarkerOptions()
    .position(latLng)
    .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_GREEN));

10种默认颜色可供选择。如果这还不够(简单的解决方案),那么我可能会选择其他答案中给出的更复杂的方法,从而满足更复杂的需求。

ps:我在另一个答案中写了类似的内容,因此我应该参考该答案,但是上次我这样做的时候,我被要求发布答案,因为答案太短了(就像这个答案一样)。

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.