javascript - 带有多个图标的 Google Maps API 标记

Question

我想使用 Google Maps JavaScript API 实现一个复杂的标记，它结合了静态图像(PNG 文件)和可“即时”编辑的图像，例如 SVG。这就是我的目标:

我已经将“士兵”构建为 PNG 文件标记，并且一切正常。但是，我似乎找不到一种方法可以将多个元素添加到标记的“图标”属性中。我已阅读所有 Google Maps API 文档、引用资料和示例，并查看了此链接:

How to place multiple icons for Google map markers in v3?

该链接似乎没有什么帮助，因为我希望士兵下方的红色条动态变化，因为它代表士兵的健康状况。

有人有可行的解决方案吗？我不介意它不使用 SVG 而使用 CSS 甚至 Canvas，只要它呈现一个长度可以动态调整的简单矩形即可。

谢谢。

Answer 1

一种选择是使用两个单独的标记，绑定(bind)在一起(如果您需要移动它们):

var soldier = new google.maps.Marker({
  position: map.getCenter(),
  map: map,
  draggable: true,
  icon: { url: "http://www.geocodezip.com/mapIcons/greenSoldier.png",
   scaledSize: new google.maps.Size(32,48)
  }
});
var health = new google.maps.Marker({
  position: soldier.getPosition(),
  map: map,
  icon: { path: "M 100 100 L 150 100 L 150 110 L 100 110 z",
  scale: 0.5,
  fillColor: "red",
  fillOpacity: 1.0,
  strokeColor: "black",
  strokeWeight: 2,
  anchor: new google.maps.Point(125,110)
  }
});
health.bindTo("position", soldier);

proof of concept fiddle

代码片段:

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var soldier = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    draggable: true,
    icon: {
      url: "https://www.geocodezip.net/mapIcons/greenSoldier.png",
      scaledSize: new google.maps.Size(32, 48)
    }
  });
  var health = new google.maps.Marker({
    position: soldier.getPosition(),
    map: map,
    icon: {
      path: "M 100 100 L 150 100 L 150 110 L 100 110 z",
      scale: 0.5,
      fillColor: "green",
      fillOpacity: 1.0,
      strokeColor: "black",
      strokeWeight: 2,
      anchor: new google.maps.Point(125, 110)
    }
  });
  health.bindTo("position", soldier);
  setInterval(changeLength, 5000);
  var idx = 0;

  function changeLength() {
    var icon = health.getIcon();
    icon.fillColor = colors[(idx) % colors.length];
    icon.path = lengths[(idx++) % lengths.length];
    health.setIcon(icon);
  }

}
google.maps.event.addDomListener(window, "load", initialize);
var colors = ["green", "green", "yellow", "red"];
var lengths = ["M 100 100 L 150 100 L 150 110 L 100 110 z",
  "M 100 100 L 140 100 L 140 110 L 100 110 z",
  "M 100 100 L 130 100 L 130 110 L 100 110 z",
  "M 100 100 L 120 100 L 120 110 L 100 110 z"
]

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>