如何在谷歌地图 v3 中添加值

Question

我在谷歌搜索过，但我无法得到它。我需要这种类型的值在标记中

我尝试了一些东西，但没有得到结果

var locations = [
  [33.906896, -6.263123, 20],
  [34.053993, -6.792237, 30],
  [33.994469, -6.848702, 40],
  [33.587596, -7.657156, 50],
  [33.531808, -7.674601, 8],
  [33.58824, -7.673278, 12],
  [33.542325, -7.578557, 15]

];
var mapOptions = {
  zoom: 4,
  center: new google.maps.LatLng(28.975750, 10.669184),
  mapTypeId: google.maps.MapTypeId.SATELLITE
};

var marker, i;
for (i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][0], locations[i][1]),
    icon: 'icon.png' + locations[i][2]
    map: map
  });
}

Answer 1

你不能这样做。一个与标签标记只能显示1个字符。但是您可以在代码中即时创建标记图标。这是一个粗略的例子：

function createMarker(width, height, title) {
  var canvas, context, radius = 4;
  canvas = document.createElement("canvas");
  canvas.width = width;
  canvas.height = height;
  context = canvas.getContext("2d");
  context.clearRect(0, 0, width, height);
  context.fillStyle = "rgb(0,191,255)";
  context.strokeStyle = "rgb(0,0,0)";
  context.beginPath();
  context.moveTo(radius, 0);
  context.lineTo(width - radius, 0);
  context.quadraticCurveTo(width, 0, width, radius);
  context.lineTo(width, height - radius);
  context.quadraticCurveTo(width, height, width - radius, height);
  context.lineTo(radius, height);
  context.quadraticCurveTo(0, height, 0, height - radius);
  context.lineTo(0, radius);
  context.quadraticCurveTo(0, 0, radius, 0);
  context.closePath();
  context.fill();
  context.stroke();
  context.font = "bold 10pt Arial"
  context.textAlign = "center";
  context.fillStyle = "rgb(255,255,255)";
  context.fillText(title, 15, 15);
  return canvas.toDataURL();
}

当你放置标记时：

var marker, i;
for (i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][0], locations[i][1]),
    icon: createMarker(30, 20, '$' + locations[i][2].toString()),
    map: map,
  });
}

演示 -> http://jsfiddle.net/cfbh9va8/

如前所述，这是一个粗略的演示，展示了该技术。我相信有很多例子用箭头等绘制画布，或者你自己也可以很容易地做到这一点。我的图形技能不是那么好:)