Reactjs 谷歌地图中带有搜索框的地图是否迟钝?
我想把这个例子改编成一张有地面覆盖的地图,这样地图既有搜索框又有地面覆盖;到目前为止,我的工作还在进行中。以下是组件:Reactjs 谷歌地图中带有搜索框的地图是否迟钝?,reactjs,google-maps,Reactjs,Google Maps,我想把这个例子改编成一张有地面覆盖的地图,这样地图既有搜索框又有地面覆盖;到目前为止,我的工作还在进行中。以下是组件: /* global google */ import React from 'react' import _ from 'lodash' import { compose, withProps, lifecycle } from 'recompose' import { withScriptjs, withGoogleMap, GoogleMap, Marke
/* global google */
import React from 'react'
import _ from 'lodash'
import { compose, withProps, lifecycle } from 'recompose'
import {
withScriptjs,
withGoogleMap,
GoogleMap,
Marker,
GroundOverlay } from 'react-google-maps'
const { SearchBox } = require("react-google-maps/lib/components/places/SearchBox");
export const MapWithASearchBox = compose(
withProps({
googleMapURL: `https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}&v=3.exp&libraries=geometry,drawing,places`,
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />,
}),
lifecycle({
componentWillMount() {
const refs = {}
this.setState({
bounds: null,
center: {
lat: 41.9, lng: -87.624
},
markers: [],
onMapMounted: ref => {
refs.map = ref;
},
onBoundsChanged: () => {
this.setState({
bounds: refs.map.getBounds(),
center: refs.map.getCenter(),
})
},
onSearchBoxMounted: ref => {
refs.searchBox = ref;
},
onPlacesChanged: () => {
const places = refs.searchBox.getPlaces();
const bounds = new google.maps.LatLngBounds();
places.forEach(place => {
if (place.geometry.viewport) {
bounds.union(place.geometry.viewport)
} else {
bounds.extend(place.geometry.location)
}
});
const nextMarkers = places.map(place => ({
position: place.geometry.location,
}));
const nextCenter = _.get(nextMarkers, '0.position', this.state.center);
this.setState({
center: nextCenter,
markers: nextMarkers,
});
// refs.map.fitBounds(bounds);
},
})
},
}),
withScriptjs,
withGoogleMap
)(props =>
<GoogleMap
ref={props.onMapMounted}
defaultZoom={15}
center={props.center}
onBoundsChanged={props.onBoundsChanged}
>
<SearchBox
ref={props.onSearchBoxMounted}
bounds={props.bounds}
controlPosition={google.maps.ControlPosition.TOP_LEFT}
onPlacesChanged={props.onPlacesChanged}
>
<input
type="text"
placeholder="Customized your placeholder"
style={{
boxSizing: `border-box`,
border: `1px solid transparent`,
width: `240px`,
height: `32px`,
marginTop: `27px`,
padding: `0 12px`,
borderRadius: `3px`,
boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
fontSize: `14px`,
outline: `none`,
textOverflow: `ellipses`,
}}
/>
</SearchBox>
{props.markers.map((marker, index) =>
<Marker key={index} position={marker.position} />
)}
</GoogleMap>
);
问题是,在带有搜索框的地图中,我无法像在带有覆盖的原始地图中那样平滑地平移。这显示在这个GIF中,我不得不将其压缩为8种颜色,以适应StackOverflow的2MB文件大小限制:
从GIF中可以看到,在带有搜索框的地图中,我只能平移一小段距离,然后它“停止”,而在下面的地图中,我可以正常平移。是什么导致了这种情况?不要使用onBoundsChanged属性来设置状态,而是使用onIdle,因为它的调用频率较低 他的回答值得称赞