uiwjs / react-baidu-map

基于 React 封装的百度地图组件,支持 React Hook,帮助你轻松的接入地图到 React 项目中。
https://uiwjs.github.io/react-baidu-map
MIT License
225 stars 22 forks source link

奇怪的lable不消失 #328

Open jy1989 opened 6 months ago

jy1989 commented 6 months ago

采用如下写法:

<Map ref={map} widget={['NavigationControl']} enableScrollWheelZoom={true} center={center} >
          //下面的marker和label都正常
          {
            marker && <React.Fragment>
              <Marker

                position={{ lat: marker.lat, lng: marker.lng }}
                onClick={({ type, target }) => {
                  setIsModalOpen(true)
                }}
              />
              <Label style={{ border: 1, padding: '5px' }} position={{ lat: marker.lat, lng: marker.lng }}>
                <p>{marker.name}</p>
              </Label>
            </React.Fragment>
          }
        //marker正常,label不正常
          {deviceHistories.map((item, index) => (
            <React.Fragment key={index + "history"}>
              <Marker
                key={index + "marker"}
                position={{ lat: item.lat, lng: item.lng }}
                icon={icon}
              />
              <Label
                key={index + "label"}
                position={{ lat: item.lat, lng: item.lng }}
              >
                <p>{item.createdAt}</p>
              </Label>
            </React.Fragment>
          ))}
......

deviceHistories数组一开始为空,赋值后也一切正常,但是当我清空deviceHistories的时候,marker会消失,但是label不消失,而且奇怪的是第一段的marker和label都正常, 第二段的label却消失不了。 试过写成两个循环,也是一样的效果

一开始devicehistories为空

image

赋值

image

清空 ,marker消失了,label还在

image

jaywcjlove commented 6 months ago

可以试一下 visiable props @jy1989

<Marker visiable={visiable}
jy1989 commented 6 months ago
visiable={visiable}

@jaywcjlove 改成这样还是一样 十分神奇

 {

            deviceHistories.map((item, index) => (
              <React.Fragment key={index + "history"}>
                <Marker
                  key={index + "marker"}
                  position={{ lat: item.lat, lng: item.lng }}
                  icon={icon}
                />
                <Label
                  key={index + "label"}
                  position={{ lat: item.lat, lng: item.lng }}
                  visiable={deviceHistories.length > 0}
                >
                  <p>{item.createdAt}</p>
                </Label>
              </React.Fragment>
            ))}
jy1989 commented 6 months ago

不用label,用 CustomOverlay ,一切正常