正如所承诺的，我已经包含了我完整的工作代码。此函数将标记绘制为画布图像。士兵和他的血条是分开绘制的，因为士兵通常是静态的（除非我们想通过画布为他设置动画）但是当他被击中时血条会发生变化。我已经在我的游戏中测试了代码，它运行良好。
geocodezip，我最终没有采纳您的建议，主要原因是出于性能原因不想将游戏中的标记数量增加一倍。一个玩家可以在游戏中拥有数百个单位，并且任何时候都可能有数百个玩家，因此将标记加倍以达到我想要的效果可能会影响性能。不过，您的代码很棒，我可能会在双倍标记不会影响性能的情况下使用它。
代码如下：
function createUnitMarker(latLng, unitData) {
var img = new Image();
img.crossOrigin = "Anonymous";
img.src = 'http://yourservername.com/' + unitData.icon;
img.onload = function() {
// google maps markers can only be created inside the onload function, otherwise nothing is drawn
// source: GitHub, viktorkelemen/Custom canvas google maps marker
// create the marker and all associated elements
var canvas, context;
var color = "blue";
var healthBar = { // this object controls aspects of the unit health bar
width: 62,
height: 10,
x: 5,
y: 82
}
canvas = document.createElement("canvas");
context = canvas.getContext("2d");
canvas.width = unitData.width;
canvas.height = unitData.height;
function drawBar(percent, color) {
// this function draws the unit health bar
// colours the health bar background grey
context.fillStyle = "gray";
context.fillRect(healthBar.x, healthBar.y, healthBar.width, healthBar.height);
// fills the health bar with the passed colour, or empty it if the unit dies
if (typeof percent == undefined || percent == null || percent == NaN) {
percent = 100;
}
if (typeof color == undefined || color == null || color == NaN) {
color = "green";
}
// we want to ensure that the health bar fill is always contained within the health bar width
var width = Math.min(percent * healthBar.width, healthBar.width);
width = Math.max(width, 0);
// colour-code the health bar depending on health
if (percent < 0.4) {
color = "red";
}
else if (percent < 0.7) {
color = "orange";
}
else {
color = "green";
}
context.fillStyle = color;
context.fillRect(healthBar.x, healthBar.y, width, healthBar.height);
// places a black stroke around the health bar for greater visibility
context.lineWidth = 2;
context.strokeStyle = "black";
context.strokeRect(healthBar.x, healthBar.y, healthBar.width, healthBar.height);
}
function drawIcon(img, width, height) {
// this function draws the unit
if (typeof img === "undefined" || img === null || img === "" || img === NaN) {
img = img;
}
if (typeof width === "undefined" || width === null || width === "" || width === NaN) {
width = unitData.width;
}
if (typeof height === "undefined" || height === null || height === "" || height === NaN) {
height = unitData.height;
}
context.clearRect(0, 0, width, height);
// save the canvas context
context.save();
// draw the image
context.drawImage(img, 0, 0);
context.restore();
}
drawIcon(img, unitData.width, unitData.height);
// create an icon based on the png we want to use
var icon = {
url: canvas.toDataURL(),
size: new google.maps.Size(unitData.width, unitData.height), // the dimensions in pixels of the marker image
origin: new google.maps.Point(0, 0), // the origin for this image, where top left is (0, 0)
labelOrigin: new google.maps.Point(25, 40), // the position of the label relative to the icon
anchor: new google.maps.Point(unitData.width / 2, unitData.height / 2) // the anchor for this image, or where the "base point" is located
}
// this is the key unit object. it should store all information directly related to this unit
var marker = new google.maps.Marker({
position: latLng, // the lat/lon where the marker is drawn
label: {
color: "yellow",
fontFamily: "Oswald",
fontSize: "20px",
fontWeight: "bold", // use CSS font-weight properties
text: unitData.unit_ID.toString(),
visibility: "hidden"
},
title: "Infantry", // title on hover
icon: icon, // the icon to be drawn, using an image file or canvas
animation: google.maps.Animation.DROP, // a bit of flair :)
// every element below this point is game-specific and not part of the google maps api
unitID: unitData.unit_ID, // the unique unit id for this unit as returned by the server
etc: 0
});
// to add the marker to the map, call setMap()
marker.setMap(gv.map);
// draw the health bar last so that it's always on top, and after we know the unit's current/max health
var healthPercent = marker.current_health / marker.max_health;
drawBar(healthPercent);
// these are the key commands required every time we need to re-draw something on the unit
icon.url = canvas.toDataURL(); // re-draws the canvas, usually because we have changed something above this line
icon = JSON.parse(JSON.stringify(icon)); // stringifies the icon properties
marker.setIcon(icon); // applies the changed icon properties to the icon
marker.addListener('label_changed', function() {
// this listener is intended to update the unit's health bar on attack. it's a bit of a hack as it relies on changes to the marker's label to fire an event. other options are changing a marker's title, or writing a custom event (which is more involved)
// draw the health bar last so that it's always on top, and after we know the unit's current/max health
healthPercent = this.current_health / this.max_health;
drawBar(healthPercent);
icon = {
url: canvas.toDataURL(),
size: new google.maps.Size(unitData.width, unitData.height), // the dimensions in pixels of the marker image
origin: new google.maps.Point(0, 0), // the origin for this image, where top left is (0, 0)
labelOrigin: new google.maps.Point(25, 40), // the position of the label relative to the icon
anchor: new google.maps.Point(unitData.width / 2, unitData.height / 2) // the anchor for this image, or where the "base point" is located
}
// all we want to do is change the icon url, but we can't just pass it to setIcon as it will lose the other icon properties. instead, we clone the icon object and change the url in the clone, passing it to setIcon when selected
icon = JSON.parse(JSON.stringify(icon));
this.setIcon(icon);
});
}
}