开发环境

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会显示出来，结果没有。

骑手正在取件途中
     
      1.8公里
     
`}     point={point}     offset={courierOffset}     massClear={false}     zIndex={100} // 同html的z-index     style={labelStyle}/>

于是就知道这个是支持hmtl字符串的；

这样换行控制是解决了，接下来是样式,按照jsx的语法写，没效果，想着也合理。

content={`
    
     骑手正在取件途中
    
    
     1.8公里
    
`}

于是又试了直接写class

content={`
    
     骑手正在取件途中
    
    
     1.8公里
    
`}

这样感觉也不合理，因为样式需要babel编译的，直接这样写，是识别不了的。

因此就有了解决方案

content={`
    
     骑手正在取件途中
    
    
     1.8公里
    
`}

外框的实现

外框其实通过设置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};