杰霸霸博客

主题

createPortal函数 ​

createPortal允许你将一些子元素渲染到DOM的不同部分，可以使用portal渲染模态对话框，或将React组件渲染到非React DOM节点

1. 使用createPortal ​

createPortal可以在除了root节点容器之外添加DOM节点：

jsx
import { createPortal } from 'react-dom'

function App() {

  return (
    <>
      Hello App
      {
        createPortal(<p>这是一个标题！</p>, document.body)
      }
    </>
  )
}
export default App

运行效果：
Alt text Antd的模态框底层就是使用createPortal来创建的。

2. 地图实操 ​

2.1 安装 ​

cmd
npm i @amap/amap-jsapi-loader --save

2.2 代码实现 ​

jsx
import { useEffect } from 'react'
import AMapLoader from '@amap/amap-jsapi-loader'
import './MapContainer.css'

function App() {
  let map = null;

  useEffect(() => {
    window._AMapSecurityConfig = {
      securityJsCode: "817fd2c7633fb67e6ccd04b083266867",
    }
    AMapLoader.load({
      key: "cad2838fd13097bda52c00d81e0d7279", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })
      .then((AMap) => {
        map = new AMap.Map("container", {
          // 设置地图容器id
          viewMode: "3D", // 是否为3D地图模式
          zoom: 15, // 初始化地图级别
          center: [104.038949,30.671347], // 初始化地图中心点位置
        })
        //创建一个 Marker 实例：
        const marker = new AMap.Marker({
          position: new AMap.LngLat(104.038949,30.671347), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: "北京",
        });
        // 添加弹出框
        let info = []
        info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>工作地址</h4>");
        info.push("<p class='input-item'>电话 : 010-84107000   邮编 : 100102</p>");
        info.push("<p class='input-item'>地址 :北京市朝阳区望京阜荣街10号首开广场4层</p></div></div>");
        const infoWindow = new AMap.InfoWindow({
          content: info.join("")  //使用默认信息窗体框样式，显示信息内容
        });
        infoWindow.open(map, map.getCenter());
        //将创建的点标记添加到已有的地图实例：
        map.add(marker);
      })
      .catch((e) => {
        console.log(e);
      })

    return () => {
      map?.destroy()
    }
  }, [])

  return (
    <div
      id="container"
      style={{ padding:'0px', width: '100%', margin: '0px', height: "700px" }}
    ></div>
  )
}
export default App

运行效果：
Alt text