设置个性化地图不生效

[maimai123]

const { setContainer, map } = useMap({
    enableScrollWheelZoom: true, // 启用滚轮放大缩小，默认禁用
    center: '杭州',
    widget: ['GeolocationControl'],
    mapStyleV2: { styleId: '2335a4594cb2b4a46a8246a8696ae537' },
    // mapStyleV2: { styleJson: customConfig },
  });

两种方式都没用 且地图根本不显示

[jaywcjlove]

@maimai123 可以使用 https://codesandbox.io/s/f1ul8 建立一个实例，我帮你看看

[maimai123]

@maimai123 可以使用 https://codesandbox.io/s/f1ul8 建立一个实例，我帮你看看

你知道为啥没生效么 我看你例子里是 把useMap单独作为一个方法使用

import ReactDOM from 'react-dom';
import { useRef, useEffect, useState } from 'react';
import { Map, APILoader, useMap } from '@uiw/react-baidu-map';

const Example = () => {
  const divElm = useRef();
  const [zoom, setZoom] = useState(15)
  const { setContainer, map, center, setCenter, setAutoLocalCity } = useMap({
    enableScrollWheelZoom: true, // 启用滚轮放大缩小，默认禁用
    center: '北京',
    zoom: 10,
    widget: ['GeolocationControl', 'NavigationControl']
  });
  useEffect(() => {
    if (divElm.current && !map) {
      setContainer(divElm.current);
    }
  });

  useEffect(() => {
    if (map) {
      // 启用滚轮放大缩小，默认禁用
      map.setZoom(zoom);
    }
  }, [zoom, map]);

  return (
    <>
      <div ref={divElm} style={{ height: '100%' }} />
    </>
  )
}

const Demo = () => (
  <div style={{ width: '100%', height: '300px' }}>
    <APILoader akay="GTrnXa5hwXGwgQnTBG28SHBubErMKm3f">
      <Example />
    </APILoader>
  </div>
);
ReactDOM.render(<Demo />, _mount_);

但我之前是直接放在Demo组件里用就会报错 拆开就好了 😭

[jaywcjlove]

@maimai123 APILoader 组件是加载 SDK，加载完成，全局将会有 window.BMap 对象。放到一起，SDK没有加载完。