javascript - 如何在 React 应用程序中实现谷歌地图搜索框
问题描述
我是 React 和谷歌地图的新手。我正在使用google-map-react将 Google 地图集成到我的 React 应用程序中。我能够成功加载地图并添加标记。
但是在尝试添加 SearchBox 时出现错误。我遵循了此处的文档SeachBox Documentation以及问题线程GitHub issue。但我仍然收到错误消息。这段代码有什么问题?
这是我的代码
应用程序.js
import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
import './App.css';
import Driver from './Driver';
import Passenger from './Passenger';
import SearchBox from './SearchBox';
class App extends Component {
constructor(props) {
super(props);
this.state = {
apiReady: false,
map: null,
googlemaps: null
};
}
static defaultProps = {
center: {
lat: 6.92,
lng: 79.86
},
zoom: 15,
};
handleApiLoaded = (map, maps) => {
// use map and maps objects
if (map && maps) {
this.setState({
apiReady: true,
map: map,
googlemaps: maps
});
}
};
render({ apiReady, googlemaps, map } = this.state) {
return (
// Important! Always set the container height explicitly
<div style={{ height: '100vh', width: '100%' }}>
<GoogleMapReact
bootstrapURLKeys={{ key: 'AIzaSyCk7pbkmNhknGumy2vgDykdgVj6lSreTt0', libraries: ['places'] }}
defaultCenter={this.props.center}
defaultZoom={this.props.zoom}
yesIWantToUseGoogleMapApiInternals
onGoogleApiLoaded={({ map, maps }) => this.handleApiLoaded(map, maps)}
>
<Driver
lat={6.8972152}
lng={79.8541014}
/>
<Passenger
lat={6.9272012}
lng={79.8681316}
/>
{apiReady && (<SearchBox
// placeholder={"123 anywhere st."}
// onPlacesChanged={this.handleSearch}
map={map}
googlemaps={googlemaps} />)}
</GoogleMapReact>
</div>
)
}
}
export default App
搜索框.js
import React from 'react';
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
export default class SearchBox extends React.Component {
static propTypes = {
placeholder: PropTypes.string,
onPlacesChanged: PropTypes.func
}
render() {
return <input ref="input" placeholder={this.props.placeholder} type="text"/>;
}
onPlacesChanged = () => {
if (this.props.onPlacesChanged) {
this.props.onPlacesChanged(this.searchBox.getPlaces());
}
}
componentDidMount() {
var input = ReactDOM.findDOMNode(this.refs.input);
// eslint-disable-next-line no-undef
this.searchBox = new googlemaps.places.SearchBox(input);
this.searchBox.addListener('places_changed', this.onPlacesChanged);
}
componentWillUnmount() {
this.searchBox.removeListener('places_changed', this.onPlacesChanged);
}
}
// eslint-disable-next-line no-unused-expressions
// eslint-disable-next-line no-lone-blocks
{/* <script defer type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyCk7pbkmNhknGumy2vgDykdgVj6lSreTt0&libraries=places"></script> */}
我已经粘贴了完整的代码,因为我不确定我哪里出错了。
解决方案
google-map-react 属性bootstrapURLKeys
提供了避免将脚本直接插入 HTML 的可能性
<GoogleMapReact
bootstrapURLKeys={{
key: 'XXXXXXXXXXXXXXXXXXX',
libraries: 'places'
}}
......
/>
这里还有一个使用钩子的搜索框的代码片段(不要忘记在父功能组件的情况下onPlacesChanged
使用记忆回调):useCallback
const SearchBox = ({ maps, onPlacesChanged, placeholder }) => {
const input = useRef(null);
const searchBox = useRef(null);
const handleOnPlacesChanged = useCallback(() => {
if (onPlacesChanged) {
onPlacesChanged(searchBox.current.getPlaces());
}
}, [onPlacesChanged, searchBox]);
useEffect(() => {
if (!searchBox.current && maps) {
searchBox.current = new maps.places.SearchBox(input.current);
searchBox.current.addListener('places_changed', handleOnPlacesChanged);
}
return () => {
if (maps) {
searchBox.current = null;
maps.event.clearInstanceListeners(searchBox);
}
};
}, [maps, handleOnPlacesChanged]);
return <input ref={input} placeholder={placeholder} type="text" />;
};
推荐阅读
- r - survreg 模型总结中的 Nan 和 Inf
- fortran - 为什么具有可分配组件的 coarray 在从不同图像访问时会产生分段错误?
- networking - 如何从世界任何地方访问安装在 Virtual box 上的 Ubuntu 服务器
- moleculer - 是否可以创建具有许多 Validator 实例的分子服务?
- python - 如何在熊猫数据框中按另一列分组后插入缺失的日期和前向填充列
- ios - 使用 NSLayoutConstraint 时导致编译错误
- vim - 如何在 vim 语法区域中使用与开始和结束相同的模式?
- ios - 扩展中无法识别 Swift 类属性
- javascript - 使用 AJAX 从表单输入发送电子邮件
- javascript - 如何在 Android 中运行 Java Script 函数并获得返回?