Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Map组件动态属性mapStyle修改未响应 #193

Open
asjdf opened this issue Dec 26, 2023 · 9 comments
Open

Map组件动态属性mapStyle修改未响应 #193

asjdf opened this issue Dec 26, 2023 · 9 comments

Comments

@asjdf
Copy link

asjdf commented Dec 26, 2023

已成功操作setMapStyle,但Map组件无变化
image

image
@wangxingkang
Copy link
Member

我看下问题

@asjdf
Copy link
Author

asjdf commented Dec 26, 2023

非常感谢您这么快的回复!

@wangxingkang
Copy link
Member

@asjdf 加了个示例 我这可以切换 https://amap.xingkang.wang/components/map

@asjdf
Copy link
Author

asjdf commented Dec 26, 2023

非常感谢,看来是我学艺不精了,冒昧问一下为什么这么写能切换呢?我那样直接修改字符串是哪个地方写得不对吗?前端小白还请不吝赐教,感谢!

@wangxingkang
Copy link
Member

麻烦写个复现 demo 吧 我再看具体问题

@asjdf
Copy link
Author

asjdf commented Dec 26, 2023

起了一个小项目复现问题。

https://github.com/asjdf/react-amap-demo

发现需要在dev模式下复现,build后运行无法复现(功能正常)。这可能是在 codesandbox 无法复现的原因?

@wangxingkang
Copy link
Member

好的

@wangxingkang
Copy link
Member

@asjdf 看描述 应该是严格模式导致的 可以先去掉 有空我排查下问题

@asjdf
Copy link
Author

asjdf commented Dec 26, 2023

在问题解决前,贴一个我自己的解决方案在这里给需要的人(

function MapAutoDarkMode(): ReactElement {
  const {map} = useMap();
  const isDarkMode = useIsDarkMode();
  useEffect(() => {
    if (isDarkMode) {
      console.debug("dark mode")
      map.setMapStyle('amap://styles/grey')
    } else {
      console.debug("light mode")
      map.setMapStyle('amap://styles/fresh')
    }
  }, [isDarkMode]);
  return <></>
}



<Map
  WebGLParams={{
    preserveDrawingBuffer: true,
  }}
>
  <MapAutoDarkMode/>
</Map>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants