react+百度地图实现自定义图标

开发环境

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

<Label
     content={`<div>骑手正在取件途中</div><div>1.8公里</div>`}
     point={point}
     offset={courierOffset}
     massClear={false}
     zIndex={100} // 同html的z-index
     style={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>
    <Label
      content={`<div>骑手正在取件途中</div><div class='${
        styles.courierLabel
      }'>1.8公里</div>`}
      point={point}
      offset={courierOffset}
      massClear={false}
      zIndex={100} // 同html的z-index
      style={labelStyle}
   />
</Map>