问题介绍
AMap.InfoWindow()用于在地图上弹出详细信息展示窗体。其参数Options中的content属性接受类型为String/HTMLElement
,无法直接渲染React组件。你可以查看高德地图API官方文档了解更多信息
解决思路
react-amap是一个基于React封装的高德地图组件库,提供了一种插槽式API,允许将React组件作为InfoWindow的内容。让我们深入了解作者是如何实现的。通过查看github源码,我们可以发现作者是如何创建一个HTML元素作为content,并将React组件渲染到这个div中:
js
setChild(props: IWProps) {
const child = props.children
if (this.infoDOM && child) {
render(<div>{child}</div>, this.infoDOM) // infoDOM: HTMLElement
} else {
if (props.children) {
console.warn('因为你设置 isCustom 为 true,InfoWindow 的 Children 被忽略')
}
}
}
在 React 18 中,render
函数被 createRoot
函数替换,我们直接来看看一个react项目的入口是如何实现渲染的
html
//index.html
<!doctype html>
<html lang="en">
<head>
...
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
js
//main.ts
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
ReactDOM.createRoot(document.getElementById('root')!).render(
<App />
)
上述代码显示,首先在index.html中创建了一个根节点,然后在main.ts中使用createRoot
创建React根元素,最后调用render
方法进行渲染。
解决步骤
参考上面的代码,想要在高德地图的InfoWindow中渲染React组件,可以按以下步骤进行:
- 创建一个HTML元素:
js
const window = document.createElement('div')
- 使用
ReactDOM.createRoot
将React组件渲染到HTML元素中:
js
ReactDOM.createRoot(window).render(<YourComponent />)
- 使用AMap.InfoWindow(),将之前创建的HTML元素作为content:
js
const Window = new AMap.InfoWindow({
isCustom: true, // 使用自定义窗体
content: window
})
效果对比
如果我们直接使用React组件效果如下:
js
const Window = new AMap.InfoWindow({
isCustom: true, // 使用自定义窗体
content: <InfoWindow />
})
而使用上文提供的方法的效果如下: