将谷歌地图标记颜色更改为我选择的颜色答案

【问题标题】：change google map marker color to a color of my choice将谷歌地图标记颜色更改为我选择的颜色
【发布时间】：2020-12-03 02:32:39
【问题描述】：

是否可以从默认的红色标记颜色更改为我选择的十六进制颜色？我一直在寻找堆栈溢出，但似乎没有找到答案。这是我目前所拥有的。

var marker = new google.maps.Marker({
            position: myLatLng,
            label: '23',
            map: map
        });

【问题讨论】：

标签： javascript google-maps google-maps-api-3

【解决方案1】：

一种选择是为标记图标定义一个 SVG 符号。 SVG 图标颜色可以在它们的构造函数中设置。

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',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 2,
        scale: 1
    };
}

然后像这样使用它：

var marker1 = new google.maps.Marker({
  map: map,
  position: new google.maps.LatLng(47.5, -122.0),
  icon: pinSymbol('green')
});

proof of concept fiddle

代码 sn-p：

function initialize() {
  var latlng = new google.maps.LatLng(47.605, -122.2);
  var myOptions = {
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);
  var marker = new google.maps.Marker({
    map: map,
    position: latlng,
    icon: pinSymbol('red')
  });

  var marker1 = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(47.5, -122.0),
    icon: pinSymbol('#7CFC00')
  });
  var marker2 = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(47.6, -122.3),
    icon: pinSymbol('orange')
  });
  var marker3 = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(47.7, -122.1),
    icon: pinSymbol('yellow')
  });
}

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',
    fillColor: color,
    fillOpacity: 1,
    strokeColor: '#000',
    strokeWeight: 2,
    scale: 1
  };
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>

【讨论】：

【解决方案2】：

标记没有颜色属性/属性..标记使用图标，因此您可以更改颜色更改图标

这是来自谷歌地图开发人员

var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var beachMarker = new google.maps.Marker({
   position: {lat: -33.890, lng: 151.274},
   map: map,
   icon: image
 });

【讨论】：

有可以浏览的谷歌地图图标网站吗？我不需要花哨的图标，只是 google 的图标相同，但背景颜色不同
看看这个 SO stackoverflow.com/questions/8248077/… 或者你可以像这样在网站上搜索miftyisbored.com/…
问题是他们拥有的图标颜色非常通用，例如“蓝色”、“绿色”等。我有一个特定的十六进制颜色代码，我希望标记具有
@beewuu 你可以建立一个你喜欢的图标..是一个普通的 png。将其保存在可访问的站点区域，然后加载提供的示例并使用..