react引入百度地图sdk，自定义标签样式问题

百度地图参考文档

http://lbsyun.baidu.com/index.php?title=jspopular3.0
http://lbsyun.baidu.com/jsdemo.htm#a1_2
http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference_3_0.html#a3b17

react项目展示百度地图

在componentDidMount()中声明，并在render函数中创建地图容器。

componentDidMount(): void {
    
    
    let map = new BMap.Map('allmap');//声明地图实例
    this.point = new BMap.Point(locations.lng, locations.lat);//后面有地方需要引用,所以定义了一个全局变量。
    }

      <div className={styles.map_content}>
     <div className={styles.mapp} id="allmap"></div>
   </div>

具体的一些控件和API可以参考上面文档自行添加到定义好的地图实例下面。

自定义标签

百度地图组件提供自定义文本标注的方法
参考文档
通过label下的setStyle来添加一个对象来设置样式（注意将css中的’-‘删除，并换成驼峰命名），但是这样的方式有很大的局限性，无法实现较为复杂的标签样式，这个时候就可以通过label API下的
通过传入HTML并通过内联样式来实现复杂的标签样式需求。

例子：
    label.setContent(`<div style="padding-top:1px;
    font-family:HiraginoSansGB-W3,HiraginoSansGB;
    line-height: 24px;">${
      
      data.label_name}</div>
    <div style="border-width: 4px; 
    border-style: solid; 
    border-color: rgb(62, 123, 240) transparent transparent; 
    border-image: initial; 
    width: 4px; position: 
    relative; top: -1px; 
    left: 49%;"></div>`)