开发环境
1.react
2.百度地图使用的是：rc-bmap
实现效果
实现图中提示框的效果。
看到这个，用过百度地图的第一个会想到marker，其实不是，用的是Label，其实难点不在这，这个看看API，都能很快琢磨出来。
难点
1.如何显示成带图标的那个外框
2.里面的内容如何换行，及设置样式
思路
看了API,Marker不能显示内容,但Marker可以使用Label属性，其实也是用的Label；
所以开始研究Label，首先Label是显示内容的，但是label的content属性只能是string,这就麻烦了，怎么控制字体显示呢，怎么设置样式呢？
原来使用了jsx的语法来写，显示的是[Object Object]显然不支持啊。
解决方法
最后根据经验试了下html字符串，字符串上套了层div，原以为div会显示出来，结果没有。
<Labelcontent={`<div>骑手正在取件途中</div><div>1.8公里</div>`}point={point}offset={courierOffset}massClear={false}zIndex={100} // 同html的z-indexstyle={labelStyle}/>
于是就知道这个是支持hmtl字符串的；
这样换行控制是解决了，接下来是样式,按照jsx的语法写，没效果，想着也合理。
content={`<div>骑手正在取件途中</div><div className={${styles.label}}>1.8公里</div>`}
于是又试了直接写class
content={`<div>骑手正在取件途中</div><div class='label'>1.8公里</div>`}
这样感觉也不合理，因为样式需要babel编译的，直接这样写，是识别不了的。
因此就有了解决方案
content={`<div>骑手正在取件途中</div><div class='${styles.label}'>1.8公里</div>`}
外框的实现
外框其实通过设置Label的style来实现。
相关code
import courierLabelBG from "./images/courier_label_bg.svg";//图片中带有前面的小车const point = {lng: 116.404,lat: 39.915};const { Description } = DescriptionList;const ButtonGroup = Button.Group;const labelStyle = {backgroundImage: `url(${courierLabelBG})`,backgroundRepeat: "no-repeat",backgroundSize: "cover",backgroundColor: "rgba(0, 0, 0, 0)",border: "none",color: "rgba(51,51,51,1);",paddingLeft: "54px",paddingTop: "8px",fontWeight: "400",width: "181px",height: "52px"};const courierOffset = {width: -92,height: -54};<Map ak="WAeVpuoSBH4NswS30GNbCRrlsmdGB5Gv" scrollWheelZoom><Labelcontent={`<div>骑手正在取件途中</div><div class='${styles.courierLabel}'>1.8公里</div>`}point={point}offset={courierOffset}massClear={false}zIndex={100} // 同html的z-indexstyle={labelStyle}/></Map>
