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

开发环境

1.react
2.百度地图使用的是:rc-bmap

实现效果

图片描述

实现图中提示框的效果。
看到这个,用过百度地图的第一个会想到marker,其实不是,用的是Label,其实难点不在这,这个看看API,都能很快琢磨出来。

难点

1.如何显示成带图标的那个外框
2.里面的内容如何换行,及设置样式

思路

看了API,Marker不能显示内容,但Marker可以使用Label属性,其实也是用的Label
所以开始研究Label,首先Label是显示内容的,但是labelcontent属性只能是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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值