谷歌地图API V3 - 标记点的标签和颜色

Question

我有一个问题，需要定义自己的标记标签和标记颜色，所以我找到了this answer。根据这个答案，我可以利用Google图表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"最近的一篇文章中，我发现他们为标记引入了一个新的label属性。现在，我可以轻松地为标记定义一个标签，如下所示：

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

- user27

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

- geocodezip