英文:
Why `options` is render every time using react-google-maps/api
问题
你好,我有一个在React中使用的Google地图,我认为GoogleMap
中的options
参数每次都会重新渲染。
我有以下代码:
<GoogleMap
ref={this.myRef}
mapContainerStyle={{ width: '100%', height: '100%' }}
center={center}
options={{
zoomControl: false,
streetViewControl: false,
fullscreenControl: false,
mapTypeId: 'satellite',
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_CENTER,
},
}}
onLoad={(map) => { this.onMapLoad(map) }}
zoom={3}
onZoomChanged={() => this.onZoomChanged()}
onClick={() => { this.props.handleMouseClickOnMap() }}
>
在options
中,我添加了一些参数,但是当我使用这种方式时,似乎mapType
不断地重新渲染,当我选择标签后,经过一些时间标签就会消失。当我删除options
并将mapTypeId: 'satellite'
单独放在外部作为单独的参数时,一切都正常,但我想要居中mapType
选项。当我只有options
中的mapTypeControlOptions
并删除mapTypeId
时,地图每次都会重新渲染,但标签不会被删除。我想要默认的mapTypeId: 'satellite'
并居中mapTypeControl
,在选择标签时不会删除它们,也不会不断重新渲染。有人有什么建议吗?
英文:
Hello i have a google map in react and i think that the options parameter in GoogleMap
is render every time.
I have this code
<GoogleMap
ref={this.myRef}
mapContainerStyle={{width:'100%', height:'100%' }}
center={center}
options={{
zoomControl: false,
streetViewControl: false,
fullscreenControl: false,
mapTypeId:'satellite',
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_CENTER,
},
}}
onLoad={(map) => {this.onMapLoad(map)}}
zoom={3}
onZoomChanged={() => this.onZoomChanged()}
onClick={() => {this.props.handleMouseClickOnMap()}}
>
Inside the options i add some parameters, but when i am doing with this way seems that the mapType
is rendering continuously and when i choose labels after some sec. labels disappear. When i am deleting the options and i have the mapTypeId:'satellite'
outside as a lone parameters works fine, but i want to center the mapType
option. When i have only mapTypeControlOptions
inside the options and erase the mapTypeId
render every time again but the labels are not erased. I want to have default mapTypeId:'satellite'
and center the mapTypeControl
without erasing the labels when i choose them and without render continuously. Does anyone has any ideas ??
答案1
得分: 0
我解决了我的问题。我在这里定义了一个名为mapOptions
的变量。
constructor(props) {
super(props)
this.state = {
// ....
}
this.myRef = React.createRef();
this.mapOptions = undefined
}
在我的GoogleMap
组件内部,我这样做了:
<GoogleMap
ref={this.myRef}
mapContainerStyle={{ width: '100%', height: '100%' }}
center={center}
options={this.mapOptions}
onLoad={(map) => { this.onMapLoad(map) }}
zoom={3}
onZoomChanged={() => this.onZoomChanged()}
onClick={() => { this.props.handleMouseClickOnMap() }}
>
在属于GoogleMap
组件的onLoad
属性内部,我这样做了:
onMapLoad = (map) => {
map.setMapTypeId('hybrid')
this.mapOptions = {
zoomControl: true,
streetViewControl: false,
fullscreenControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_CENTER,
},
mapTypeControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.LEFT_CENTER,
},
labels:true
}
this.setState({
theMap: map
})
}
这种方式使得当您移动地图或触发地图的重新渲染时,onLoad
函数不会受到影响。
英文:
I solved my question. I define a variable here, that called: mapOptions
constructor(props) {
super(props)
this.state = {
....
}
this.myRef = React.createRef();
this.mapOptions = undefined
}
Inside my GoogleMap
component i did this
<GoogleMap
ref={this.myRef}
mapContainerStyle={{ width: '100%', height: '100%' }}
center={center}
options={this.mapOptions}
onLoad={(map) => { this.onMapLoad(map) }}
zoom={3}
onZoomChanged={() => this.onZoomChanged()}
onClick={() => { this.props.handleMouseClickOnMap() }}
>
And inside the prop onLoad
that belongs to GoogleMap
component i did this:
onMapLoad = (map) => {
map.setMapTypeId('hybrid')
this.mapOptions = {
zoomControl: true,
streetViewControl: false,
fullscreenControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_CENTER,
},
mapTypeControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.LEFT_CENTER,
},
labels:true
}
this.setState({
theMap: map
})
}
With this way when you move the map or something that force a re render to the map, onLoad
function does not affect.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论