hooks方式使用map，自定义样式 mapStyleV2 报错 "cross-origin error"

[x011223]

样式json 在组件方式使用时正常，另外百度官方的 json url 同样报错.

A cross-origin error was thrown. React doesn't have access to the actual error object in development.

使用方式 - 全报错

1. local json
2. js 变量
3. oss json
4. map.setMapStyleV2({ styleJson });

复现demo: https://codesandbox.io/s/modern-butterfly-crvlcn?file=/src/App.js

[jaywcjlove]

https://codesandbox.io/s/eager-nightingale-4inotu?file=/src/App.js
这个示例不知道怎么建的感觉有问题，跟组件没有关系吧 @Feafortecsy

我这个示例里面 JS 引入 没有 加 crossorigin，上面示例都加了这个，这个是 codesandbox 的问题吧
https://codesandbox.io/s/uiwjs-react-md-editor-issues-351-ep1qb0?file=/index.html

[x011223]

codesandbox默认的react模版，除了添加库没有别的操作了。而且有个问题 是 在组件方式使用时正常，在hooks使用时就报错 @jaywcjlove

[jaywcjlove]

https://codesandbox.io/s/react-baidu-map-demo-forked-g8vq3s?file=/src/index.js

@Feafortecsy 我不太清楚，你可以尝试我上面示例。

你可以研究研究 codesandbox 官方文档： https://codesandbox.io/docs/configuration#sandbox-configuration

[x011223]

@jaywcjlove fork了你的这个示例，虽然没报错 但是自定义样式也没有生效，暂时找不到原因。我这边先跳过了，回头有时间再看

[jaywcjlove]

react-baidu-map/packages/map/README.md

Lines 107 to 168 in de7213e

	```jsx
	import ReactDOM from 'react-dom';
	import { useState } from 'react';
	import { Map, APILoader, useMap, Provider, useMapContext } from '@uiw/react-baidu-map';
	const Marker = () => {
	const { map } = useMapContext();
	const container = useRef(null);
	const { setContainer } = useMap({
	zoom: 9,
	widget: ['GeolocationControl', 'NavigationControl']
	});
	useEffect(() => {
	if (container.current) {
	setContainer(container.current);
	}
	}, [container.current]);
	useEffect(() => {
	if (map) {
	// 创建点标记
	const marker1 = new BMap.Marker(new BMap.Point(116.404, 39.925));
	const marker2 = new BMap.Marker(new BMap.Point(116.404, 39.915));
	const marker3 = new BMap.Marker(new BMap.Point(116.395, 39.935));
	const marker4 = new BMap.Marker(new BMap.Point(116.415, 39.931));
	// 在地图上添加点标记
	map.addOverlay(marker1);
	map.addOverlay(marker2);
	map.addOverlay(marker3);
	map.addOverlay(marker4);
	}
	}, [map]);
	return (
	<div ref={container} style={{ height: 300 }} />
	);
	}
	const Demo = () => {
	return (
	<div style={{ width: '100%', height: '300px' }}>
	<APILoader akay="GTrnXa5hwXGwgQnTBG28SHBubErMKm3f">
	<Provider>
	<div>
	<Marker />
	</div>
	</Provider>
	</APILoader>
	</div>
	);
	}
	ReactDOM.render(<Demo />, _mount_);
	```
	```js
	import { useMapContext, Provider } from '@uiw/react-baidu-map';
	const { AMaps, map, container, state, dispatch } = useMapContext();
	// => state.AMaps
	// => state.map
	// => state.container
	```

@Feafortecsy Hook 的新玩儿法。

[x011223]

@jaywcjlove 大佬牛逼。不过今天上线，还是稳妥为上，等下次迭代我再看看。