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

思路

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

`