如何在react-google-maps中调用函数getCenter()和其他函数

2024-03-21

I tried:

<GoogleMap
  defaultZoom={14}
  center={{lat: props.mapCenter.lat, lng: props.mapCenter.lng}}
  onCenterChanged={getCenter()}
/>

Update: 我正在使用Stateless Functional Component:

const MarkerClustererExampleGoogleMap = withGoogleMap(props => (

    <GoogleMap 
        defaultZoom={14} 
        center={{lat: props.mapCenter.lat, lng: props.mapCenter.lng}} 
        onCenterChanged={getCenter()} 
    >
)

但我收到错误:

getCenter 未定义。

怎么解决这个问题,谢谢。


您可以调用类似的函数getCenter(), getZoom(), getBounds()通过 React 从地图 API 等ref到地图组件

这是一个粗略的示例,请注意这是一个未经测试的代码片段,应被视为伪代码,但它希望能让您了解如何进行此设置:

let ref

...

<GoogleMap 
  ref={(mapRef) => ref = mapRef} // bind the ref
  onCenterChanged={() => {
    ref.getCenter() // get the center, zoom, whatever using the ref
  }}
/>

文档中有更多关于如何执行此操作的详细示例,例如here https://tomchentw.github.io/react-google-maps/#searchbox.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在react-google-maps中调用函数getCenter()和其他函数 的相关文章

  • Google 地图位于活动的中间区域

    我正在使用 Android studio 2 1 2 我检查了一下 大多数问题要么使用旧版本的 Android studio 要么使用一些旧的类 这些类不适用于我的情况 从文件 gt 新项目 gt 我使用了选项Google Maps Act
  • 语法:const {} = 变量名,任何人都可以解释或指出我正确的方向[重复]

    这个问题在这里已经有答案了 这个语法在 JavaScript 中意味着什么 可能是 ES6 const 变量名 我目前正在尝试掌握 React 在很多例子中我都遇到过这种语法 例如 const girls guys women men st
  • Google 地图 InfoBubble PixelOffset(从标记上方的默认位置移动)

    我正在尝试实现一个自定义 infoBubble 它的框打开到标记的侧面 而不是顶部的默认位置 事实证明这比预期的要困难 使用普通的infoWindow 您可以使用pixelOffset 请参阅此处文档 https developers go
  • Android - 绘制两个地理点之间的路线

    在我的方向类中 我有两个地理点 一个对应于当前位置 另一个是固定地理点 当前位置会不断变化 我需要在这两点之间绘制路线 并且需要更改这条线以改变距离500米 我认为最好的解决方案称为 android 内部地图活动来显示两个地理点之间的路线
  • 如何使用 React 获取查询字符串?

    我试图从网址获取 query 123 http localhost 3000 query 123 http localhost 3000 query 123 Tried App js const search this props loca
  • React 中的变异状态有哪些缺点?

    我有一个带有顶级组件和许多嵌套子组件的 React 应用程序 顶级组件是唯一具有状态的组件 该状态采用单个变量的形式 this state g new BlackJackGame g 包含一个复杂的数据结构 class BlackJackG
  • 样式化组件:如何针对直系儿童?

    我在文档中看到 选择器用于嵌套定位 但以下不起作用 这里使用的正确语法是什么 const InlineContainer styled div display flex gt margin right 40px 作为 CSS 值 字符串 4
  • 谷歌地图颤动检查点是否在多边形内

    我正在使用 google maps flutter 插件开发 flutter 项目 我想检查用户位置是否位于我在地图上创建的多边形内 有一个简单的方法使用 JavaScript api con tainsLocation 方法 但对于 fl
  • 如何找到特定路线上两点之间的距离?

    我正在为我的大学开发一个 Android 应用程序 可以帮助学生跟踪大学巴士的当前位置 并为他们提供巴士到达他们的预计时间 截至目前 我获取了公交车的当前位置 通过公交车上的设备 和学生的位置 我陷入了必须找到两个 GPS 坐标之间的距离的
  • Google Maps API v3 Places 库返回未定义的 utc_offset

    我正在开发一个时间和位置感知应用程序 谷歌地图 v3 api 地点库几乎拥有我需要的一切 但是 当对特定地址执行 textSearch 并尝试为返回的 PlaceResult 项目之一调用 getDetails 时 从 getDetails
  • 绘制多边形

    我正在使用 Google Maps API V3 根据路径绘制多边形 该路径是随机未排序坐标点 LatLng 的数组 这会产生以下形状 Polylines intersect Problem 由于多边形的形状取决于路径中点的顺序 因此如何对
  • Redux 减速器的副作用

    Redux 减速器应该没有副作用 但是 如果某个操作应该触发浏览器中文件的下载 其中内容基于商店的状态 该怎么办 这当然应该算作副作用吗 像下面这样的方法可以吗 还是我应该寻找替代方法 case SAVE GRID const json s
  • css-loader 不导入 .css 文件返回空对象

    从 css 文件导入样式 返回空对象 看来 css loader 无法正常工作 谁可以帮我这个事 请找到下面的参考文件 index js import React from react import style from header cs
  • React App 中的图像损坏

    我正在尝试访问 React 应用程序中的图像 当我运行代码时 我在网页上看到一个损坏的图像图标 我不确定我是否正在访问图像的正确路径 我的代码如下 import React Component from react class Header
  • 在不同环境中运行的react.js redux生产构建中将环境变量渲染到浏览器

    React redux realworld io 应用程序的自述文件位于https github com gothinkster react redux realworld example app https github com goth
  • 如何发送和接收大型 JSON 数据

    我对全栈开发比较陌生 目前正在尝试找出一种有效的方法send and fetch我的前端 React 和后端 Express 之间存在大量数据 同时最大限度地减少内存使用 具体来说 我正在构建一个地图应用程序 它需要我处理大型 JSON 文
  • 使用 rollup.js 创建 React 库时出现错误 null(读取“useState”)

    我正在使用 rollup js 创建一个反应库 但是当我运行时npm run build我收到一个错误 仿佛useState尝试从中检索钩子null Uncaught TypeError Cannot read properties of
  • 将两个 JSON 数据合并为具有特定键值的一个

    我有两个 CSV 文件 球数据 json id 1 color red id 2 color blue 法庭 json court id 2001 ball in use 1 court id 2005 ball in use 2 如何根据
  • webpack中动态加载外部模块失败

    我正在尝试建立以下架构 一个核心 React 应用程序 它具有一些基本功能 并且能够在运行时加载其他 React 组件 这些额外的 React 组件可以按需加载 并且它们在构建核心应用程序时不可用 因此它们不能包含在核心应用程序的捆绑包中
  • 如何映射轮播的子项数组?

    我正在尝试将 Carousel 组件包装在映射对象数组周围作为组件的子级 目前我只能让映射创建映射对象的 1 个子对象 轮播需要像这样

随机推荐