在百度地图上自定义打点样式和消息框

在百度地图上自定义打点样式和自定义消息图
实现效果如下：

思路

刚开始想通过修改infowindow样式，可是发现非常困难，于是考虑通过marker将自定义图和canvas图直接覆盖到地图上。

由于带消息广内容是变化的，所以需要每次打点前使用canvas,将UI提供的切图作为canvas画布的背景，然后将数据作为文字填充到画布上，最后返回一个canvas；通过new BMap.Icon创建一个icon实例,最后map.addOverlay(Icon)覆盖到地图上

具体代码如下：
创建canvas, 并在画布上画图和文字
`

/**
 * 
 * @param file 
 * @param name 
 * @param value 
 * file 背景图片
 * name value 显示的文字和值
 */
export const canvasPngAddTxt = (file: any, name: string, value: string) => {
  const cvs: any = document.createElement('canvas')
  const ctx: any = cvs.getContext('2d')
  cvs.width = 260
  cvs.height = 70

  const imgWidth = cvs.width
  const imgHeight = cvs.height

  ctx.rect(0, 0, imgWidth, imgHeight)
  ctx.fillStyle = 'rgba(255,255,255,0)';
  ctx.fill()
  const img = new Image()
  img.src = file
  img.crossOrigin = 'Anonumous'
  img.onload = () => {
    ctx.drawImage(img, 0, 0, cvs.width, cvs.height, 0, 0, cvs.width, cvs.height)
    ctx.font = '18px bold sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillStyle = '#fff';
    const left = cvs.width*0.78;
    const top = cvs.height*0.066;
    ctx.fillText('react大厦', 52, 37);
    ctx.fillText('90%', 125, 37);
  }
  return cvs
}

`

在百度地图上打点，使用自定义图片和canvas创建的图
`

  function markPoint(BMap: any, cardText: any) {
    const pt = new BMap.Point(
      buildingPoints[0][0],
      buildingPoints[0][1],
    );
    // 自定义canvas图
    const cardIconLeft = new BMap.Icon(
        cardText,
        new BMap.Size(170, 120),
        {  
            anchor: new BMap.Size(170, 43) // anchor使矩形图的右下角对着点位  
        }
    )
    // 点
    const circleIcon = new BMap.Icon(
        CircleIcon,
        new BMap.Size(30, 30),
    );
    const marker = new BMap.Marker(pt, { icon: circleIcon });
    const markerCard = new BMap.Marker(pt, { icon: cardIconLeft });
    map.addOverlay(marker); // 自定义圆点
    map.addOverlay(markerCard);// 自定canvas图
    });
  }

`

`

// 创建地图
useEffect(() => {
    initGLMap();
    setBuildingPoints([
      [120.232549, 30.230392],
      [120.232549, 30.230492],
    ]);
  }, []);
  
  // 地图打点
 useEffect(() => {
    const infoCardImg = createCardTextImg()
    markPoint(BMapGL, infoCardImg);
  }, [buildingPoints, map]);

`