使用地理编码初始化 React Google Maps StandaloneSearchBox

2023-12-12

有人可以告诉我如何使用类型初始化React Google Maps的StandaloneSearchBox组件:['geocode'](就像原始的google.maps.places.Autocomplete一样,这样我就可以限制自动完成的输入建议?


根据亚历山大的建议,我能够做这样的事情。将地址传递到地址搜索中并使用地理编码进行附近搜索。希望这可以帮助。

import React from 'react';
import { compose, withProps, lifecycle } from 'recompose';
import { withScriptjs } from 'react-google-maps';
import StandaloneSearchBox from 'react-google-maps/lib/components/places/StandaloneSearchBox';
import get from 'lodash/get';
import head from 'lodash/head';
import { Search } from '../components';

const GOOGLE_API_KEY = '123';

const AddressSearchbox = compose(
  withProps(props => {
    return {
      ...props,
      googleMapURL: `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_API_KEY}&v=3.exp&libraries=geometry,drawing,places`,
      loadingElement: <div style={{ height: `100%` }} />,
      containerElement: <div style={{ height: `400px` }} />,
    };
  }),
  withScriptjs,
  lifecycle({
    componentDidMount() {
      const refs = {};

      this.setState({
        places: [],
        searchText: '',
        error: null,
        onSearchBoxMounted: ref => {
          refs.searchBox = ref;
        },
        onPlacesChanged: () => {
          const places = refs.searchBox.getPlaces();
          this.setState({
            places,
            searchText: '',
          });
        },
      });

      ***
      const geocoder = new google.maps.Geocoder();
      geocoder.geocode({ address: this.props.placeName }, (results, status) => {
      if (status === google.maps.DirectionsStatus.OK) {
        const lngs = results[0].geometry.bounds.j;
        const lats = results[0].geometry.bounds.l;
        this.setState({
          boundSearch: new google.maps.LatLngBounds(
            new google.maps.LatLng(lats.l, lngs.l),
            new google.maps.LatLng(lats.j, lngs.j)
          ),
        });
      } else {
        this.setState({
          error: status,
        });
      }
      ***
      });
    },
  })
)(props => {
  return (
    <div data-standalone-searchbox="">
      <StandaloneSearchBox
        ref={props.onSearchBoxMounted}
        onPlacesChanged={props.onPlacesChanged}
        bounds={props.boundSearch}
      >
        <Search searchText={props.searchText} />
      </StandaloneSearchBox>
      <div>{get(head(props.places), 'formatted_address')}</div>
    </div>
  );
});

export default AddressSearchbox;

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

使用地理编码初始化 React Google Maps StandaloneSearchBox 的相关文章

随机推荐

  • 为什么1+++2=3?

    Python 如何计算表达式1 2 有多少曾经 我放在中间 它正在打印3作为答案 请任何人都可以解释这种行为 And for 1 2正在打印3并为1 2正在打印 1 你的表达方式是一样的 1 2 任何数字表达式前面都可以带有 使其变为负数
  • 如何使文本动态调整其大小以适应容器

    上图是没有使用FittedBox小部件 此处文本溢出 上图是使用FittedBox小部件 这里所有文本包含在一行中 Container width double infinity height 100 color Colors red ch
  • jQuery Mobile 页面更改后无法访问元素

    我在这里创建了一个简单的示例来说明我的问题 https github com kanesee jqm page state 基本上 我有 page1 html 其中有一个 id content 的 div 我将其颜色更改为红色 我有一个 p
  • Azure 客户端 ID、租户和 Key Vault URI 是否被视为机密?

    我正在加快使用 Azure 的速度 并尝试遵循最佳实践来保护我的 WPF 和 Xamarin Forms 应用程序 我使用 Azure AD 进行身份验证 使用 Key Vault 保存我的机密 我的客户端 ID 和租户设置怎么样 这些是与
  • Sweave/R/LaTeX 的初学者问题(图表、参考书目)——我的第一份文档

    我刚刚开始Sweave与R 我在这里使用R输出一些数据 我也试图包括一个情节 代码不会摇摆 我有一个Sweave来自网络的示例可以很好地编译RStudio with LaTeX documentclass a4paper article b
  • 如何使用 swfobject 通知 HTML 容器 SWF 已完成

    我正在将 flash 对象 swf 文件 嵌入到 HTML 页面中 该对象是用 as3 编写的 并使用 Flash Builder 构建 它的目的是显示一些动画 然后完成 能够通知容器动画已完成对我来说非常重要 但我找不到任何有效的方法 我
  • 如何将一对多从控制器传递到mvc4中的视图

    好的 这将是在你们帮助我进行更改之后 我假设我在某处遇到语法错误 View model OilNGasWeb ModelData Clients ViewBag Title Index h2 County s for h2 p Html A
  • 在设备上的线性内存中循环二维数组时将 float* 转换为 char*

    CUDA 4 0 编程指南第 21 页上有一个示例 如下所示 来说明循环 设备内存中二维浮点数组的元素 2D 的尺寸为宽 高 Host code int width 64 height 64 float devPtr size t pitc
  • Google Drive CSS/JS 返回 404 错误

    我在 Google Drive 上托管了我的 CSS JS 但它突然停止工作 在 Chrome Safari Mac iPhone 上测试过 检查后用Chrome 我看到 Google Drive 的链接返回 404 还有其他人有过吗 Go
  • 如何在加权networkx图中找到总和最高的路径?

    我有一个有向网络加权图 如何找到权重和最大的路径 您可以使用all simple paths并检查最大值 假设您有一个采用路径并给出权重总和的函数 heaviest path max path for path in nx all simp
  • Java 约定中的 Getters 和 Setters [重复]

    这个问题在这里已经有答案了 我的 Java 有点生疏 过去几年一直在做 C 我也希望这不会是一个非常主观的问题 不管怎样说我有课Person 是的 我知道有点陈词滥调 没有任何行为 C 版本 public class Person publ
  • 如何使用 pandas/sklearn 删除停止短语/停止 ngram(多单词字符串)?

    我想防止某些短语渗入我的模型 例如 我想阻止 红玫瑰 进入我的分析 我了解如何添加单独的停用词 如将单词添加到 scikit learn 的 CountVectorizer 的停止列表中通过这样做 from sklearn feature
  • Javascript - 日期范围验证

    我有一个表单用户可以输入任何日期 但我想设置一个日期范围验证 例如 从2012年12月1日到2013年1月1日 系统无法接受不在该范围内的用户的任何日期 我已经尝试过这个javascript代码 但它甚至没有给我任何警报当日期不在范围内时
  • 访问 C#.net 中的 webbrowser 控件中呈现的框架

    我需要获取 C net 中的 webbrowser 控件呈现的页面中的链接 问题是我认为该页面使用框架 这就是为什么我无法从网络浏览器获取任何链接 我如何访问或查看网络浏览器控件中的那些框架 你可以使用Frames财产 webBrowser
  • 函数属性与泛型的 TypeScript 组合

    此类型的要点是允许用户传入数据 颜色 hasColor or 数据 信息 hasInfo 不是任何其他组合 type Props data string info string hasInfo boolean color never has
  • Python Plotly 图表更新有两个下拉菜单

    我正在尝试在 Jupyter Lab 中构建一个绘图散点图 以便能够查看 DataFrame 中各个列之间的依赖关系 我想要两个下拉菜单 对应于 X 轴和 Y 轴 每个菜单中都有 DF 列的完整列表 当我在任何菜单中选择一列时 相应轴上的数
  • iOS 基本 FTP 设置;读写流

    我正在尝试创建一个具有一些非常基本的 FTP 功能的 iOS 5 应用程序 并且需要一些指导 它将连接到本地网络上的设备并使用 dat txt 文件执行读 写操作 在过去的几天里 我进行了一些搜索 并看到了各种建议 但没有什么足够简单 我可
  • 如何实现“回收站”功能?

    我正在开发一个 Java 桌面应用程序 需要在其中实现回收站功能 现在 我使用桌面应用程序将文件复制到名为回收站的文件夹中 然后删除原始文件 我将目标路径存储在一个文本文件中 其中文件被删除 只是为了将文件恢复到原始位置 恢复文件时 我只是
  • 如何使用 mysql 创建每周队列分析表?

    假设您有一个用户表 其中至少包含用户注册的日期和 ID 现在 假设您有一个单独的表 用于跟踪可能在用户生命周期中的任何时刻发生的操作 例如付款 比如应用内购买 在该表中 我们跟踪用户 ID 付款日期和付款 ID 所以我们有类似这样的东西来设
  • 使用地理编码初始化 React Google Maps StandaloneSearchBox

    有人可以告诉我如何使用类型初始化React Google Maps的StandaloneSearchBox组件 geocode 就像原始的google maps places Autocomplete一样 这样我就可以限制自动完成的输入建议