用ChatGPT解决这个技术问题 Extra ChatGPT

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

我见过很多其他类似的问题（here、here 和 here），但他们都接受了不能解决我的问题的答案。我发现该问题的最佳解决方案是 StyledMarker 库，它允许您为标记定义自定义颜色，但我无法让它使用默认标记（当您进行谷歌地图搜索时获得的标记） - 中间有一个点），它似乎只是提供带有字母或特殊图标的标记。

C
Community

您可以使用以下网址从 Google charts api 动态请求图标图像： 

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

https://i.stack.imgur.com/cdiAE.png

而且您还需要一个单独的阴影图像（这样它就不会与附近的图标重叠）： 

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

https://i.stack.imgur.com/A46OX.png

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

https://i.stack.imgur.com/cdiAE.png

归功于 Jack B Nimble 的灵感；）

虽然我真的很喜欢这个答案，但关于 Infographics（您在上面提供的链接）的谷歌图表 API 已被弃用。
不确定这是否是新的，但您可以添加 _withshadow 以自动内置阴影。例如，chart.apis.google.com/…
@LionelChan，你可以，但它没有完全对齐，它也会重叠在其他图标之上。您要确保在引脚之前绘制所有阴影。
@mattburns 很好，对于某些人来说，这可能是一个更简单的解决方案，为什么不；）
自 2019 年 3 月 14 日起，这种创建标记的方式已被弃用。它不再起作用：error502
E
Emzor

如果您使用 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)
这是极好的。如果您需要更多图标和颜色选择，可以在此处找到它们：sites.google.com/site/gmapsdevelopment
v
vokimon

这是使用 Google Maps API 本身的一个很好的解决方案。没有外部服务，没有额外的图书馆。它支持自定义形状以及多种颜色和样式。该解决方案使用矢量标记，googlemaps api 将其称为 Symbols。

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

要使用它，您无需将“图标”标记选项设置为图像 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"),
});

https://i.stack.imgur.com/sBnjv.png

如果您小心地将形状关键点保持在 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',

https://i.stack.imgur.com/Cvw7X.png

在这里你有一个非常简单和丑陋的彩色标志： 

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

https://i.stack.imgur.com/BfEEV.png

您还可以使用 Inkscape（GNU-GPL，多平台）等可视化工具创建路径。一些有用的提示：

Google API 只接受单个路径，因此您必须将任何其他对象（正方形、圆环...）转换为路径并将它们作为一个单独的路径加入。路径菜单中的两个命令。

要将路径移动到 (0,0)，请转到路径编辑模式 (F2) 选择所有控制节点并拖动它们。用 F1 移动对象，不会改变路径节点坐标。

为确保参考点位于 (0,0)，您可以单独选择它并在顶部工具栏上手动编辑坐标。

保存作为 XML 的 SVG 文件后，使用编辑器打开它，查找 svg:path 元素并复制“d”属性的内容。

这是一个很好的答案。如果有人能想出一条看起来像真正大头针的路径，这将是一个很好的答案
此解决方案比从 URL 加载 Pin 图片更好。因为，如果您在单个地图中有多个 Pin 图，则会增加地图加载时间。
@mkoryak 我添加了一些关于如何使用诸如 inkscape 之类的图形工具自己绘制这些路径的提示。如果您想匹配任何现有的 PNG，只需将其导入 inkscape 并将其用作路径的参考。
除了点之外，还可以将其他东西放入气球中吗？
你画出来。唯一的缺点是引脚和点都应该是同一条路径。这意味着点，不是一个点，而是一个孔。无论您使用哪种形状，圆点都将是具有该形状的针形中的一个孔。 （你看穿了）将几种颜色的形状与不同的颜色结合起来会很好，但据我所知，它只支持一条（非连续）路径。
P
PinkTurtle

好吧，我能用 StyledMarker 得到的最接近的东西是 this。

不过，中间的子弹并不像默认子弹那么大。 StyledMarker 类只是构建这个 url 并要求 google api 创建标记。

在 class use example 中，使用 "%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 中打开并使用了着色工具），但这也不是完美的。
我接受这个答案，因为它是唯一的，我想没有其他解决方案。
抱歉，我无法提供更多帮助。有时唯一的答案是一个不太理想的答案。
C
Community

我对 vokimon's answer 进行了一些扩展，使其也更方便地更改其他属性。 

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
});
P
Pablo Veintimilla Vargas

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

/* * 将地图和地点声明为全局变量 */ var map; var places = [ ['Place 1', "

Title 1

", -0.690542, -76.174856,"red"], ['Place 2', "

Title 2

" , -5.028249, -57.659052,"blue"], ['Place 3', "

Title 3

", -0.028249, -77.757507,"green"], ['Place 4', "

标题 4

", -0.800101286, -76.78747820,"橙色"], ['地点 5', "

标题 5

", -0.950198, -78.959302,"#FF33AA"] ] ; /* * 使用 google maps api 内置机制附加 dom 事件 */ google.maps.event.addDomListener(window, "load", function () { /* * create map */ var map = new google.maps. Map(document.getElementById("map_div"), { mapTypeId: google.maps.MapTypeId.ROADMAP, }); /* * 创建信息窗口（将被标记使用）*/ var infoWindow = new google.maps.InfoWindow( ); /* * 创建边界（将用于自动缩放地图） */ var bounds = new google.maps.LatLngBounds(); /* * 标记创建函数（作为 html 参数的闭包） */ 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()); }); } 返回标记; } / * * 向地图添加标记 */ for (var i = 0; i < places.length; i++) { var point = places[i]; createMarker({ posi化：新google.maps.LatLng（点[2]，点[3]），地图：地图，图标：{路径：“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"，比例：0.6，strokeWeight：0.2，strokeColor：'black'，strokeOpacity：1，fillColor：point[4] , fillOpacity: 0.85, }, }, point[1]); }; map.fitBounds(边界); });

E
Emzor

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

如需更多信息check this site

不是这个问题的答案，应该是评论
B
Bob

正如其他人所提到的，vokimon's answer 很棒，但不幸的是，当同时有许多基于 SymbolPath/SVG 的标记时，Google 地图有点慢。

看起来使用数据 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 图像，是整个矩形都是可点击的。理论上，trace the SVG path 并生成一个 MarkerShape 多边形并不难。

这太棒了。这次真是万分感谢。我对其进行了编辑以使用 stroke="{strokeColor}" 使其更加可定制。
E
Emzor

在 Internet Explorer 中，此解决方案不适用于 ssl。可以在控制台中看到错误为：SEC7111：HTTPS 安全性因此受到损害，解决方法：作为此处的一位用户建议将 chart.apis.google.com 替换为 chart.googleapis.com 的 URL 路径以避免 SSL 错误。

k
khurram

您可以使用此代码，它工作正常。 

 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
        });
E
Edward Brey

将路径绘制轮廓的 symbol-based 标记与中心的“●”字符组合在一起。您可以根据需要将点替换为其他文本（“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
        }
    };
}
S
Sun

我尝试了两种方法来创建自定义谷歌地图标记，这个使用canvg.js的运行代码是浏览器的最佳兼容性。注释掉的代码目前不支持IE11。

变量标记； 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, 9, 2.6, 10.92, 31.89, 1.6 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 = {纬度：59.327，经度：18.067，颜色：“#”+“000”，文本：“ha”}；标记 = createMarker(markerOption);标记.setMap(地图); marker.addListener('click', changeColorAndText); };函数 changeColorAndText() { var iconTmpObj = createSvgIcon( "#c00", "ok" ); marker.setOptions( { icon: iconTmpObj } ); }; function createMarker(options) { //IE MarkerShape 有问题 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' } });返回标记物； };函数 createSvgIcon(color, text) { var div = $("

"); var svg = $( '' + '<路径样式="填充：#FFFFFF；中风：#020202；中风宽度：1；中风斜接限制：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.256s3.325-9. 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"/>' + '' + '' + 文本 + '' + '' ); div.append(svg); var dd = $(""); var svgHtml = div[0].innerHTML; //todo yao gai bu dui canvg(dd[0], svgHtml); var imgSrc = dd[0].toDataURL("image/png"); //"scaledSize" 和 "optimized: false" 一起看起来很棘手---IE11 && viewBox influent IE scaledSize //var svg = '' // + '' // + '' // + '' + 文本 + '' // + ''; //var imgSrc = 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg); var iconObj = { 尺寸：新 google.maps.Size(32, 43)，网址：imgSrc，scaledSize：新 google.maps.Size(32, 43) };返回图标对象； }; Your Custom Marker

N
Nataliia Khotiaintseva

我尝试了很长时间来改进 vokimon 的绘制标记，使其更类似于谷歌地图（并且几乎成功）。这是我得到的代码： 

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。

g
geocodezip

这些是自定义圆形标记

小红： 

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==

小蓝： 

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

小紫色： 

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

它们是 9x9 png 图像。

一旦它们出现在您的页面上，您只需将它们拖走，您就会拥有实际的 png 文件。

C
Community

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

J
JoeGalind

使用 swift 和 Google Maps Api v3，这是我能够做到的最简单的方法： 

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

希望它可以帮助某人。

b
badaboomskey

有时很简单的事情，可以回答复杂。我并不是说上述任何答案都不正确，但我只是申请，它可以像这样简单地完成：

我知道这个问题很老，但如果有人只想更改别针或标记颜色，请查看文档：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：我在另一个 answer 中写过类似的东西，因此我应该参考那个答案，但上次我这样做时，我被要求发布答案，因为它太短了（就像这个一样） ..

s
shanthan

您也可以使用颜色代码。 

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

关注公众号,不定期副业成功案例分享
关注公众号

不定期副业成功案例分享

想领先一步获取最新的外包任务吗？

立即订阅

HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。

简体中文 English

平台

支持

联系我们

在使用过程中有任何问题或建议，可以通过以下方式联系我们：

微信公众号: 火星来客

Email: huntsbot@xinbeitime.com

Copyright© 2022-2023 www.huntsbot.com 浙ICP备2022000860号-4 All Rights Reserved.