如何在Bing Maps中实现带径向渐变效果的自定义Pushpin标记？

径向渐变版本的createPoint函数无法渲染Pushpin，存在两个核心错误：

• 仅定义了渐变填充样式，未在Canvas上执行任何图形绘制操作，最终导出的是全透明空白图片，Bing Maps加载空白图标自然无法显示点位
• 传入半径参数为5时，生成的Canvas尺寸仅为10*10像素，未给渐变边缘预留缓冲空间，即使补全绘制逻辑也会出现边缘裁剪、点位偏移问题

修正后的createPoint函数 #

补全圆形路径绘制逻辑，预留边距避免渐变被裁剪：

function createPoint(r, g, b, radius){
  // 四周预留2px边距，防止渐变边缘裁切
  const canvasSize = radius * 2 + 4;
  const centerPos = canvasSize / 2;
  const c = document.createElement('canvas');
  c.width = canvasSize;
  c.height = canvasSize;

  const ctx = c.getContext('2d');
  // 生成径向渐变
  const gradient = ctx.createRadialGradient(centerPos, centerPos, 0, centerPos, centerPos, radius);
  gradient.addColorStop(0, `rgb(${r}, ${g}, ${b})`);
  gradient.addColorStop(1, "white");

  // 绘制圆形路径并填充渐变
  ctx.beginPath();
  ctx.arc(centerPos, centerPos, radius, 0, Math.PI * 2);
  ctx.closePath();
  ctx.fillStyle = gradient;
  ctx.fill();

  return c.toDataURL();
}

点位绘制逻辑优化（可选，解决坐标偏移） #

初始化Pushpin时增加anchor配置，让圆形中心精准对齐经纬度坐标点：

function plotPoint(cord){
  const pointRadius = 5;
  const canvasSize = pointRadius * 2 + 4;
  const location = new window.Microsoft.Maps.Location(cord[0], cord[1]);

  const pin = new Microsoft.Maps.Pushpin(location, {
    icon: createPoint(100, 100, 100, pointRadius),
    // 将图标锚点设置为画布中心，对齐坐标点
    anchor: new Microsoft.Maps.Point(canvasSize / 2, canvasSize / 2)
  });

  map.entities.push(pin);
}

修复后即可正常渲染中心为指定RGB颜色、边缘平滑过渡为白色的径向渐变圆形Pushpin，和预期效果完全一致。

内容的提问来源于stack exchange，提问作者Lavnish Chaudhary