Google maps API v3 - 标记的标签和颜色

Question

我有一个定义我自己的标记标签和标记颜色的问题,所以我找到了这个答案.根据它,我可以在谷歌图表API的帮助下如下定义我的标记对象:

new google.maps.Marker({
  position:latlng,
  map:map,
  icon:'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|00FF00|000000'
});

但是在最近的一篇名为"Geo Developers Blog"的文章中,我发现他们为标记引入了一个新的标签属性.现在,我可以轻松地为标记定义标签,如下所示:

new google.maps.Marker({
  position:latlng,
  map:map,
  label: 'A'
});

我需要知道我是否可以以相同的方式定义标记颜色(而不是标签的文本颜色),以便我的标记对象看起来像:

new google.maps.Marker({
  position:latlng,
  map:map,
  label: 'A', //my label
  color: 00FF00 //my marker color 
});

Answer 1

一种选择是使用SVG符号:

var marker = new google.maps.Marker({
    map: map,
    position: latlng,
    label: "0",
    icon: pinSymbol('red')
});
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: 1,
        scale: 1,
        labelOrigin: new google.maps.Point(0,-29)
    };
}

代码段:

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

  var marker1 = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(47.5, -122.0),
    label: "A",
    icon: pinSymbol('#00FF00')
  });
  bounds.extend(marker1.getPosition());
  var marker2 = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(47.6, -122.2),
    label: "B",
    icon: pinSymbol('orange')
  });
  bounds.extend(marker2.getPosition());
  var marker3 = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(47.7, -122.1),
    label: "C",
    icon: pinSymbol('yellow')
  });
  bounds.extend(marker3.getPosition());
  map.fitBounds(bounds);
}

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: 1,
    scale: 1,
    labelOrigin: new google.maps.Point(0, -29)
  };
}

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

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>