huiyan-fe/react-bmapgl

地图类型不更新

ZYChimne opened this issue · 0 comments

这里面zoom和center都是正常的,只有类型无法更新。

const MapsContainer = (props: MapsProps) => {
  const [position, setPosition] = useState(new BMapGL.Point(116.404449, 39.914889));
  const [zoom, setZoom] = useState(12);
  const [mapType, setMapType] = useState<'normal'|'earth'|undefined>('normal');
  const getPos = () =>navigator.geolocation.getCurrentPosition((pos) => {
    setPosition(new BMapGL.Point(pos.coords.longitude, pos.coords.latitude));
    setZoom(15);
  });
  return (
    <div className={styles.maps} data-show={props.show}>
      <div className={styles.appBar}></div>
      <div className={styles.content}>
        <div className={styles.mapBar}>
          <div className={styles.mapBarLeft}>
            <div className={styles.mapBarIconBox} onClick={getPos}>
              <FontAwesomeIcon
                className={styles.mapBarIcon}
                icon={faPaperPlane}
              />
            </div>
            <div
              className={styles.mapBarIconBox}
              onClick={() => setMapType('earth')}
            >
              <FontAwesomeIcon
                className={styles.mapBarIcon}
                icon={faGlobeAsia}
              />
            </div>
          </div>
        </div>
        <div className={styles.mapContainer}>
          <Map
            center={position}
            style={{ width: `100%`, height: `100%` }}
            // 这里更新不了
            mapType={mapType}
            zoom={zoom}
            enableScrollWheelZoom
            enableDoubleClickZoom
            enableDragging
          />
        </div>
      </div>
    </div>
  );
};