react-google-maps缩放地图到圆圈
react-google-maps缩放地图到圆圈
提问于 2019-05-21 00:29:55
这主要是一个关于‘翻译’JS到JSX的问题。
我有一个react-google-maps地图，其中包含一个标记，并在该标记周围有一个圆圈：
Map组件：
export class Map extends Component {
render() {
const GoogleMapInstance = withGoogleMap(props => (
<GoogleMap
defaultCenter = { { lat: parseFloat(this.props.lat), lng: parseFloat(this.props.lng) } }
defaultZoom = { 16 }
defaultOptions={{ styles: mapStyles }}
>
<Marker position={{ lat: parseFloat(this.props.lat), lng: parseFloat(this.props.lng) }}/>
<Circle center={{ lat: parseFloat(this.props.lat), lng: parseFloat(this.props.lng) }} radius={parseFloat(this.props.accuracy)} options={{ fillColor: 'red', strokeColor: 'red' }}/>
</GoogleMap>
))
return (
<div>
<GoogleMapInstance
containerElement={ <div style={{ height: '600px', width: '100%' }}/> }
mapElement={ <div style={{ height: '100%' }}/> }
/>
</div>
)
}
}我想把地图放大，使圆圈占地图的50%左右。我知道使用Javascript API，我可以这样做：
map.fitBounds(circle.getBounds())但我不确定如何将它与我拥有的JSX集成在一起……
回答 2
Stack Overflow用户
发布于 2019-05-21 01:49:34
您可能想要这样做：
export class Map extends Component {
constructor(props) {
super(props)
this.map = React.createRef()
this.circle = React.createRef()
}
componentDidMount() {
if (this.map && this.circle) {
const bounds = this.circle.current.getBounds()
this.map.current.fitBounds(bounds)
}
}
render() {
const GoogleMapInstance = withGoogleMap(props => (
<GoogleMap
defaultCenter = { { lat: parseFloat(this.props.lat), lng: parseFloat(this.props.lng) } }
defaultZoom = { 16 }
defaultOptions={{ styles: mapStyles }}
ref={this.map}
>
<Marker position={{ lat: parseFloat(this.props.lat), lng: parseFloat(this.props.lng) }}/>
<Circle ref={this.circle} center={{ lat: parseFloat(this.props.lat), lng: parseFloat(this.props.lng) }} radius={parseFloat(this.props.accuracy)} options={{ fillColor: 'red', strokeColor: 'red' }}/>
</GoogleMap>
))
return (
<div>
<GoogleMapInstance
containerElement={ <div style={{ height: '600px', width: '100%' }}/> }
mapElement={ <div style={{ height: '100%' }}/> }
/>
</div>
)
}
}refs创建了一种访问GoogleMap和Circle节点的方法，而componentDidMount是一个生命周期钩子，它允许您在fitBounds组件首次呈现到DOM时运行Map调用。
Stack Overflow用户
发布于 2019-05-23 05:18:31
实际上，您可以通过Ref访问原生Google Map和Circle对象并对其进行操作。但是在获取map实例时，优先使用Map idle event而不是componentDidMount()生命周期方法来保证map已就绪，例如：
handleMapIdle() {
const map = this.map.current; //get Google Map instance
//...
}哪里
<GoogleMap
ref={this.map}
onIdle={this.handleMapIdle}
...
>
...
</GoogleMap>下面是一个修改后的Map组件：
class Map extends Component {
constructor(props) {
super(props);
this.map = React.createRef();
this.circle = React.createRef();
this.handleMapIdle = this.handleMapIdle.bind(this);
this.idleCalled = false;
}
handleMapIdle() {
if (!this.idleCalled) {
const bounds = this.circle.current.getBounds();
this.map.current.fitBounds(bounds);
this.idleCalled = true;
}
}
render() {
const GoogleMapInstance = withGoogleMap(props => (
<GoogleMap
ref={this.map}
defaultCenter={{
lat: parseFloat(this.props.lat),
lng: parseFloat(this.props.lng)
}}
defaultZoom={this.props.zoom}
onIdle={this.handleMapIdle}
>
<Marker
position={{
lat: parseFloat(this.props.lat),
lng: parseFloat(this.props.lng)
}}
/>
<Circle
ref={this.circle}
center={{
lat: parseFloat(this.props.lat),
lng: parseFloat(this.props.lng)
}}
radius={parseFloat(this.props.accuracy)}
options={{ fillColor: "red", strokeColor: "red" }}
/>
</GoogleMap>
));
return (
<div>
<GoogleMapInstance
containerElement={<div style={{ height: "600px", width: "100%" }} />}
mapElement={<div style={{ height: "100%" }} />}
/>
</div>
);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56224877
复制相关文章
相似问题
腾讯云开发者
