首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React-google- map +redux -如何在获取新位置时将地图居中?

React-google-map是一个基于React的Google地图组件库,redux是一个用于管理应用状态的JavaScript库。在获取新位置时将地图居中可以通过以下步骤实现:

  1. 首先,确保已经安装了react-google-maps和redux库,并在项目中引入它们。
  2. 创建一个Map组件,并在其中引入GoogleMap组件和redux的相关功能。
代码语言:jsx
复制
import React from 'react';
import { GoogleMap, withGoogleMap } from 'react-google-maps';
import { connect } from 'react-redux';

const Map = withGoogleMap(props => (
  <GoogleMap
    defaultCenter={props.center}
    defaultZoom={props.zoom}
    center={props.center}
    zoom={props.zoom}
  />
));

const mapStateToProps = state => ({
  center: state.map.center,
  zoom: state.map.zoom
});

export default connect(mapStateToProps)(Map);
  1. 在redux中创建一个mapReducer来管理地图的状态,包括中心位置和缩放级别。
代码语言:jsx
复制
// mapReducer.js
const initialState = {
  center: { lat: 0, lng: 0 },
  zoom: 10
};

const mapReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_CENTER':
      return {
        ...state,
        center: action.payload
      };
    case 'SET_ZOOM':
      return {
        ...state,
        zoom: action.payload
      };
    default:
      return state;
  }
};

export default mapReducer;
  1. 在获取新位置的操作中,通过dispatch一个action来更新地图的中心位置。
代码语言:jsx
复制
// 在合适的地方触发获取新位置的操作
const newLocation = { lat: 40.7128, lng: -74.0060 };
dispatch({ type: 'SET_CENTER', payload: newLocation });
  1. 在Map组件中使用redux的connect函数将地图的中心位置和缩放级别与redux的状态进行绑定。
  2. 最后,当redux的状态更新时,Map组件会自动重新渲染,并将地图居中到新的位置。

这样,当获取到新的位置时,地图会自动居中显示该位置。

推荐的腾讯云相关产品:腾讯云地图服务(https://cloud.tencent.com/product/maps

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

各流派 React 状态管理对比和原理实现

Redux 接收到这个 action 后通过 reducer 函数获取到下一个状态。 状态更新进 store,store 更新后通知页面进行重新渲染。 ​...所以 Redux 每次只会进行一次浅比较,这样就需要我们在修改的地方返回一个的对象。 所以 Redux 这一职责交给了开发者来保障,给开发者带来了额外的心智负担。...可以 reducer 的执行放到 produce 里面,这样我们就不需要手动去设置一个对象了。...6.9 原理 Recoil 的大致原理是这样的: 创建一个 atom 对象 使用 selector 的时候,会通过 get 来获取到依赖的 atom,生成一个 Map 映射关系 使用 useRecoilState... atom 的 key 加入到 deps 里面,从而映射了一个从 selector key 到多个 atom key 的 Map 关系。

2.9K61
  • 免费视频直播、点播H5播放器SkeyeWebPlayer 结合百度地图sdk实现电子地图播放功能

    免费视频直播、点播H5播放器SkeyeWebPlayer 结合vue-baidu-map百度地图组件实现电子地图播放功能,最终效果如图所示:图片SkeyeWebPlayer播放器如何在vue-baidu-map...HEVC/H265)1、SkeyeWebPlayer.js文件拷到static目录下SkeyeWebPlayer.js 资源图片libVSS.wasm 文件用于解码h265 ,和快照截取下载2、引入方式...,如下图:图片在点击摄像机(监控点)的时候再弹出信息窗口,通过以下方法地图中的监控点位置自动居中显示:this.map.centerAndZoom(new this.BMap.Point(lng, lat...() ,hide()这两个方法,方便在外部调用,控制显示与隐藏,在关闭播放器窗口还需要销毁播放器实例,4、在完成好所有的准备工作后,我们把自定义覆盖物放到地图中就完成了图一所示的样子。...相关代码资源下载需要注意的是,在使用快照截取和H265播放,需要用到开头说到的libVSS.wasm解码,要在webpack.base.conf.js中配置如下:plugins: [ new CopyWebpackPlugin

    3K30

    ArcGIS for Android学习(一)

    地图居中到指定的点 Point getCenter() 获取地图中心点 Polygon getExtent() 获取地图最小外包矩形 Envelope...);map.zoomTo(centerPt,2n),其中,n为放大或缩小的倍数; map.zoomToScale(Point centerPt, double scale) ;map.zoomToScale...指在哪个点放大,factor参数用来计算的分辨率,计算公式为:的分辨率 = 当前分辨率/factor。...在初始化时地图设定为某种级别(找到该级别对应的分辨率、比例尺): map.setResolution(该级别对应的分辨率);   至于如何获取当前地图等级,没办法,先获取resolution,然后去...    ,在长按地图获取鼠标点的坐标代码如下: //      长按显示鼠标点坐标及比例尺 this.map.setOnLongPressListener(new OnLongPressListener

    5.4K71

    React Native+React Navigation+Redux开发实用教程

    为了帮助大家快速上手在React Native与Redux开发,在这本文中将向大家介绍如何在React Native中使用Redux?,以及一些必备基础以及高级知识。...那么如何在React Native中使用Redux和react-navigation组合?呢?...reduxifyNavigator 函数, * 并返回一个navigation state 和 dispatch 函数作为 props的组件; * 注意:要在createReactNavigationReduxMiddleware...+Redux打造高质量上线App中获取; 问答 Redux是如何实现JS的可预测状态的管理?...单一数据源; 所有数据都是只读的,要想修改数据,必须 dispatch 一个 action 来描述什么发生了改变; 当处理 action ,必须生成一个的 state,不得直接修改原始对象; Redux

    3.9K10

    【CSS3】CSS3 动画 ④ ( 使用动画制作地图热点图 )

    一、需求说明 实现如下效果 , 在一张地图上 , 以某个位置为中心点 , 向四周发散 ; 核心 是实现 向四周 发散 的 波纹动画 ; 二、动画代码分析 1、地图背景设置 地图背景设置 : 地图 是...x 617 像素 ; 同时设置 地图 背景图片 , 并设置 水平居中 ; .map { /* 盒子模型的宽高 就是 背景图片的宽高 */...); /* 上下外边距设置为 0 , 左右外边距设置为 auto 居中 */ margin: 0 auto; } 该地图是 半透明 白色背景...; } 设置完毕后 , 可以在网页中查看该背景图 ; 2、热点动画位置测量 在 map 父容器中 , 定义 city 子元素 , 该子元素使用 绝对定位 放置位置 ; .../* 设置白色 , 容易分辨 */ color: white; } 下面通过 F12 调试的方式 , city 盒子 , 使用 绝对定位 定位到 地图图片 中的

    32820

    理解JavaScript数组方法:Map vs Filter vs Redux

    在本文中,我们探讨map和filter之间的区别,深入探讨Redux的原理和用法,并讨论每种工具在何时最适用。...Map和Filter:转换和过滤数组Map方法:map方法用于使用提供的函数转换数组的每个元素,并返回具有转换后元素的数组。...); // 输出: [2, 4, 6, 8, 10]Filter方法:filter方法用于使用提供的函数测试每个元素,并创建一个通过特定条件的数组。...type: 'INCREMENT' });store.dispatch({ type: 'INCREMENT' });store.dispatch({ type: 'DECREMENT' });// 获取当前状态...影响:Redux对应用程序架构有更广泛的影响,提供了一个集中式存储并强制执行单向数据流,而map和filter主要影响如何在单个组件中处理数据。

    15000

    谈谈 React 5种最流行的状态管理库

    在本文中,我一一介绍如何在 React App 中使用 5 种最流行的库/APIS(使用最现代和最新版本的库)如何在 React App程序中使用全局状态管理,并且达到一样的效果。...respect to other atoms/selectors) default: [], // default value (aka initial state) }); 现在,你可以在你app的任何位置使用来自...Recoil 很棒,我会为我的下一个 app 使用上它,但是担心实验性属性,因此我密切关注它,但现在不将它用于生产中。...Redux Hooks API 使 redux 使用起来不再那么麻烦,而且使用起来也更容易。 Redux Toolkit 还改进了 Redux,并大大降低了学习曲线。...在使用异步操作(例如数据获取,通常需要添加其他中间件,这会增加它的成本和复杂性。 对我来说,Redux 起初很难学习。一旦我熟悉了框架,就可以很容易地使用和理解它。

    2.7K20

    机器人如何使用 RRT 进行路径规划?

    机器人需要知道如何在环境中定位自己,或者找到自己的位置,即时绘制环境地图,避开随时可能出现的障碍物,控制自己的电动机以改变速度或方向,制定解决任务的计划等等。 ?...当机器人为了完成一项任务必须从一个起始位置到一个目标位置,它必须为如何在周围环境中移动做出一个路径计划。在机器人技术的论文上,你经常会看到像下面这样的地图,它有一个起始位置和一个目标位置。...假定有一个简单的地图,没有任何障碍物, 机器人必须从一个起始位置(红点)到达一个目标位置(绿点)。我们从一棵树开始,它的根节点表示机器人的起始位置。之后我们逐步把树建起来。怎么做到的?...我们取一组随机的地图样本,为每个随机样本创建一个节点,并以某种方式每个节点插入到树中。一旦树的节点足够接近机器人的目标位置,任务就完成了。 ?...我们所要做的就是从表示目标位置的节点开始,然后回溯,直到到达表示开始位置的节点。这样我们就可以知道机器人从起点到达终点的路径。很简单。 是否有可能在同一张地图中重用这棵树作为的目标位置?当然!

    1.5K20

    你要的 React 面试知识点,都在这了

    Array.map,Array.filter和Array.reduce是高阶函数,因为它们函数作为参数。...在组件接收到的props或者state被调用。在初始化时或者使用forceUpdate不被调用。 可以在你确认不需要更新组件使用。...当Redux状态更改时,连接到Redux的组件接收的状态作为props。当组件接收到这些props,它将进入更新阶段并重新渲染 UI。 ?...connect和bindActionCreators来自 redux。 前者用于连接 store ,第22行,后者用于 action creators 绑定到你的 props ,第20行。...如何在重新加载页面保留数据 单页应用程序首先在DOM中加载index.html,然后在用户浏览页面加载内容,或者从同一index.html中的后端API获取任何数据。

    18.5K20

    为什么我不再用Redux

    现在,异步获取数据意味着数据必须位于两个位置:前端和后端。我们必须考虑如何在全局范围内以最佳方式存储这些数据,以便它们能对我们的所有组件都可用,同时保持数据缓存以减少网络延迟。...Redux 不是缓存 使用 Redux 和类似的状态管理库,大多数人都会遇到的一大问题是,我们会将其视为后端状态的缓存。...我们获取数据,通过 reducer/action 将其添加到存储中,并定期重新获取以确保它是最新的。我们用 Redux 做的事情太多了,甚至把它看成是解决问题的全面解决方案。...我发现自己更容易注意力集中在前端应用程序的 UI/UX 上,不会再时刻操心整个后端状态了。 要对比这个库和 Redux 的话,我们来看这两种方法的一个代码示例。...( {data.length > 0 && data.map((todo) => {todo.text})} ) : null; }; 默认情况下,上面的示例包括具有合理默认值的数据重新获取

    2.6K20

    可以但没必要?分享 20 个 JavaScript 库,打开视野👀

    如果对象树中一个节点发生变化,只修改这个节点和受它影响的父节点,其它节点则进行共享 这样做的优势就是:节省 CPU、节省内存; 因为我们常通过深拷贝解决不变数据的问题,深拷贝即需要做额外的操作消耗 CPU、拷贝数据需内存...; 例 import { Map} from 'immutable'; let a = Map({ select: 'users', filter: Map({ name: 'Cam' }) }...Redux.js Redux 并非 React 人专用,它借用函数式编程思想,旨在提供可预测的状态管理; 具体的,在 Redux 中的 state 没有 setter 方法,取而代之的是:state 经过一个接一个的...Premonish.js Premonish 可以检测用户鼠标的移动位置并预测他们要移向哪个元素,帅的嘛,不谈了~~ 前往体验便知它是怎么预测的:地址 import Premonish from '...Google Maps Utility Library 顾名思义,谷歌地图共用库,可将 Google 地图导航,以及其它基于地图的功能应用于你的程序当中; 17.

    2.3K20

    RxJS & React-Observables 硬核入门指南

    当您执行.addeventlistener,你正在一个观察者推入subject的观察者集合中。无论何时事件发生,subject都会通知所有观察者。...Redux-observable获取所有这些已dispatch的action和state,并从中创建两个可观察对象- actions可观察对象action和states可观察对象state。...Actions可观察对象action发出所有使用store.dispatch()分派的actions。可观察状态state触发根reducer返回的所有状态对象。...Redux-observable获取所有这些已dispatch的action和state,并从中创建两个可观察对象- actions可观察对象action和states可观察对象state。...在本节中,我将比较redux-observable和redux-thunk,以展示redux-observable如何在复杂的用例中发挥作用。

    6.9K50

    何在Ubuntu 16.04上使用Nginx的地图模块

    另一个简单的常见示例是确保在发布新网页而不是旧网页,所有旧地址都将重定向到正确的位置。这很有用,因为它意味着旧的链接和书签不会停止工作,它也会保留Google的缓存。...在下一步中,我们利用地图模块通过查看器自动重定向到的替换来确保此旧地址再次起作用。 第2步 - 配置重定向 对于只有几页的小型网站,简单的if条件语句可用于重定向和类似的事情。...地图模块是一个更优雅,简洁的解决方案。它允许您将Nginx变量值与条件列表进行比较,然后根据匹配值与变量相关联。在此示例中,我们将比较请求的URL与我们要重定向到对应的旧页面列表。...我们添加两个部分:一个在server块之前,一个在其中。 server块前面的部分是一个map块,它使用map模块定义旧URL和URL之间的映射。server块内的部分是重定向。...该map $uri $new_uri指令获取系统$uri变量的内容,该变量包含所请求页面的URL地址,然后将其与大括号中的条件列表进行比较。

    3.4K00

    【进阶系列】地理位置专题

    谷歌地图脚本         上面的链接向您演示如何使用脚本来显示带有标记、缩放和拖曳选项的交互式地图。 2.4  给定位置的信息         本页演示的是如何在地图上显示用户的位置。... 控制控件位置         初始化控件,可提供一个可选参数,其中的anchor和offset属性共同控制控件在地图上的位置。         ...标注、折线、信息窗口等。覆盖物拥有自己的地理坐标,当您拖动或缩放地图,它们会相应的移动。...您需要在draw方法中设置覆盖物的位置,每当地图状态发生变化(比如:位置移动、级别变化),API都会调用覆盖物的draw方法,用于重新计算覆盖物的位置。...}); 3.2.3.4 移除监听事件         当您不再希望监听事件,可以事件监听进行移除。

    77130

    基于高德地图开发 Web 应用

    这里我先解释一下一个名词 LBS: LBS(Location Based Service)基于位置的服务,是利用各类型的定位技术来获取定位设备当前的所在位置,通过移动互联网向定位设备提供信息资源和基础服务...高德地图 JSAPI 最新版本是 2020-05-12 发布的 V2.0,从更新日志上来看,API 的更新还是比较频繁的,大部分是性能优化和开发的特性,兼以 Bug 的修复。...) 进行自动定位,地图中心设置为自定定位的经纬度。...(marker); //显示地图层级与中心点信息 function logMapinfo() { var center = map.getCenter(); //获取当前地图中心位置...应该还有其他更好的方法,比如使用添加一个图层, Marker 的坐标在拖动地图,相对于浏览器视口位置不动,始终垂直居中。如果有大佬出来指教,我将不耻下问。

    4.6K30

    Google Earth Engine(GEE)——GEE最全介绍(7000字长文)初学者福音!

    当拥有 Earth Engine 帐户的人访问 URL ,浏览器导航到代码编辑器并复制创建链接的环境,包括代码、导入、地图图层和地图位置。单击“获取链接”按钮将自动脚本链接复制到剪贴板。...地图 API 中的 Map 对象是指代码编辑器中的地图显示。例如, Map.getBounds()返回代码编辑器中可见的地理区域。检查MapAPI 中的函数以查看此显示的其他自定义。...单击导入将可视化参数对象作为变量加载到脚本的导入部分。 图层可视化工具 请注意,图层管理器​​右侧是用于不同地图背景的切换按钮。使用 自定义背景Map.setStyle()。...检查器选项卡 任务管理器旁边的检查器选项卡可让您以交互方式查询地图。当检查器选项卡被激活,光标变成一个十字准线,当您单击地图,它将显示光标下的位置和图层值。...Inspector 选项卡显示有关光标位置和光标下层值的信息。 控制台选项卡 当您print()从脚本中获取某些内容,例如文本、对象或图表,结果显示在Console 中。

    1.5K11

    React 手写笔记

    基于React进行开发所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React当前整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅需要变化的部分进行实际的浏览器...constructor中应当做些初始化的动作,:初始化state,事件处理函数绑定到类实例上,但也不要使用setState()。...react 16版本中提出的的解决方案,可以使组件脱离父组件层级直接挂载在DOM树的任何位置。 4. null,什么也不渲染 布尔值。也是什么都不渲染。...它使您的组件能够在它们被潜在更改之前捕获当前值(滚动位置)。这个生命周期返回的任何值都将作为参数传递给componentDidUpdate()。...要特别注意当使用 mobx-react 可以定义一个的生命周期钩子函数 componentWillReact。

    4.8K20
    领券