Javascript 如何在任何子系统上使用相同的GoogleMap组件实例？

我正在寻找一种方法，在我的应用程序的任何地方使用相同的谷歌地图实例。每次地图加载都是收费的

我正在使用。在ComponentDidMount上创建了一个新实例，因此对我来说，第一个要求是保持该组件已安装，很可能是在组件树的顶部附近

最终结果应该是，任何想要渲染贴图的组件都应该：

• 如果地图组件尚未装入，请装入它
• 以某种方式回收装载映射的DOM节点

---

对此的任何帮助都将不胜感激。

您可以尝试使用

门户提供了一种一流的方法，可以将子节点呈现到父组件的DOM层次结构之外的DOM节点中

---

但是，用户对地图所做的每一项更改（缩放、图层等）都将保留，因此，每当您在另一个部分渲染地图时，您也可以将地图重置为初始状态。门户确实是正确的方向。我提出了以下方法：

将同级节点添加到index.html：

制作一个在门户内呈现地图的组件，然后将其安装在树顶部附近的某个位置；关键是防止地图卸载

返回createPortal（renderMap（），document.getElementById（“映射容器”）；

使用回调引用在需要地图的任何地方插入地图。如何在组件上实际使用它取决于您；我制作了一个钩子来返回这个函数

const registerMapOutlet=（rootNode:htmldevelment | null）=>{
//地图
const mapNode=document.getElementById（“映射容器”）；
//如果找不到映射节点，请退出
if（mapNode==null）返回；
//挂载：附上地图
if（rootNode）{
rootNode.replaceWith（mapNode）；
console.log（“注册地图出口”）；
//GoogleMapReact在首次使用之前不会加载/装载
分派（mountmapifneed（））；
}
//卸载时：将映射返回到工作台节点
否则{
const mapBenchNode=document.getElementById（“映射台”）；
if（mapBenchNode==null）{
console.warn（“未找到映射台节点”）；
返回；
}
appendChild（mapNode）；
}
}

最后，在任何组件上使用贴图，如下所示：

//您可以将GoogleMapReact道具传递给此挂钩
const{registerMapOutlet}=useMapOutlet（{}）；
返回

GoogleMapReact的1.1.5版引入了一个shouldUnregisterMapOnUnmount属性。我将很快尝试并更新我的答案