高德地图弹窗AMap.InfoWindow()如何使用react组件作为content

问题介绍

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组件,可以按以下步骤进行:

  1. 创建一个HTML元素:
js 复制代码
const window = document.createElement('div')
  1. 使用ReactDOM.createRoot将React组件渲染到HTML元素中:
js 复制代码
ReactDOM.createRoot(window).render(<YourComponent />)
  1. 使用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 />
})

而使用上文提供的方法的效果如下:

相关推荐
代码搬运媛4 分钟前
【react实战】如何实现监听窗口大小变化
前端·javascript·react.js
EndingCoder1 小时前
React Native 开发环境搭建(全平台详解)
javascript·react native·react.js·前端框架
Moment1 小时前
为什么我在 NextJs 项目中使用 cookie 存储 token 而不是使用 localstorage
前端·javascript·react.js
F_Director1 小时前
傻子都能理解的 React Hook 闭包陷阱
前端·react.js·源码阅读
南方kenny2 小时前
React组件化实战:从零打造智能TodoList清单
前端·react.js·aigc
先树立一个小目标3 小时前
react-pdf(pdfjs-dist)如何兼容老浏览器(chrome 49)
chrome·react.js·pdf
程序员小张丶3 小时前
React Native在HarmonyOS 5.0阅读类应用开发中的实践
javascript·react native·react.js·阅读·harmonyos5.0
EndingCoder3 小时前
React Native 是什么?为什么学它?
javascript·react native·react.js
程序员小张丶4 小时前
基于React Native开发HarmonyOS 5.0主题应用技术方案
javascript·react native·react.js·主题·harmonyos5.0
MrSkye5 小时前
React入门:组件化思想?数据驱动?
前端·react.js·面试