google-map-react标记经纬度定位机制及Props传递疑问

问题背景 #

在google-map-react的官方示例中，有如下代码：

import React from "react";
import GoogleMapReact from 'google-map-react';

const AnyReactComponent = ({ text }) => <div>{text}</div>;

export default function SimpleMap(){
  const defaultProps = {
    center: {
      lat: 10.99835602,
      lng: 77.01502627
    },
    zoom: 11
  };

  return (
    <div style={{ height: '100vh', width: '100%' }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: "" }}
        defaultCenter={defaultProps.center}
        defaultZoom={defaultProps.zoom}
      >
        <AnyReactComponent
          lat={59.955413}
          lng={30.337844}
          text="My Marker"
        />
      </GoogleMapReact>
    </div>
  );
}

其中AnyReactComponent仅声明接收text作为props，但传入lat和lng后却能在地图对应位置显示，这是如何实现的？

原理说明 #

这是GoogleMapReact组件的核心设计逻辑：它会直接读取所有子组件上的lat和lng属性，不需要子组件显式接收或处理这两个props。

具体流程：

• 当你在GoogleMapReact内部渲染子组件时，GoogleMapReact会遍历所有子元素，提取它们身上的lat和lng属性值。
• 组件内部会根据当前地图的中心点、缩放级别，将经纬度转换为地图容器内的像素坐标。
• 最后通过动态设置CSS定位属性（如transform或top/left），把子组件精准定位到地图的对应位置上。

简单来说，lat和lng是GoogleMapReact给子组件约定的“定位标识”，子组件本身不需要感知这两个属性的存在，只要你给它加上，地图组件就会自动完成定位工作。

内容的提问来源于stack exchange，提问作者Rongeegee