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

在百度地图上自定义打点款式和自定义音讯图
实现成果如下：

思路

刚开始想通过批改 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]);

`