为什么 `options` 在使用 react-google-maps/api 时每次都会渲染？

huangapple
go评论101阅读模式
英文:

Why `options` is render every time using react-google-maps/api

问题

你好，我有一个在React中使用的Google地图，我认为GoogleMap中的options参数每次都会重新渲染。

我有以下代码：

  1. <GoogleMap
  2.   ref={this.myRef}
  3.   mapContainerStyle={{ width: '100%', height: '100%' }}
  4.   center={center}
  5.   options={{
  6.     zoomControl: false,
  7.     streetViewControl: false,
  8.     fullscreenControl: false,
  9.     mapTypeId: 'satellite',
  10.     mapTypeControl: true,
  11.     mapTypeControlOptions: {
  12.       style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
  13.       position: google.maps.ControlPosition.TOP_CENTER,
  14.     },
  15.   }}
  16.   onLoad={(map) => { this.onMapLoad(map) }}
  17.   zoom={3}
  18.   onZoomChanged={() => this.onZoomChanged()}
  19.   onClick={() => { this.props.handleMouseClickOnMap() }}
  20. >

在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

  1.       &lt;GoogleMap
  2.         ref={this.myRef}
  3.         mapContainerStyle={{width:&#39;100%&#39;, height:&#39;100%&#39; }}
  4.         center={center}
  5.         options={{
  6.           zoomControl: false,
  7.           streetViewControl: false,
  8.           fullscreenControl: false,
  9.           mapTypeId:&#39;satellite&#39;,
  10.           mapTypeControl: true,
  11.           mapTypeControlOptions: {
  12.             style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
  13.             position: google.maps.ControlPosition.TOP_CENTER,
  14.           },
  15.         }}
  16.         onLoad={(map) =&gt; {this.onMapLoad(map)}}
  17.         zoom={3}
  18.         onZoomChanged={() =&gt; this.onZoomChanged()}
  19.         onClick={() =&gt; {this.props.handleMouseClickOnMap()}}
  20.       &gt;

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:&#39;satellite&#39; 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:&#39;satellite&#39; and center the mapTypeControl without erasing the labels when i choose them and without render continuously. Does anyone has any ideas ??

答案1

得分: 0

我解决了我的问题。我在这里定义了一个名为mapOptions的变量。

  1. constructor(props) {
  2. 	super(props)
  4. 	this.state = {
  5. 	  // ....
  6. 	}
  7. 	this.myRef = React.createRef();
  9. 	this.mapOptions = undefined
  10. }

在我的GoogleMap组件内部，我这样做了：

  1. <GoogleMap
  2. 	ref={this.myRef}
  3. 	mapContainerStyle={{ width: '100%', height: '100%' }}
  4. 	center={center}
  5. 	options={this.mapOptions}
  6. 	onLoad={(map) => { this.onMapLoad(map) }}
  7. 	zoom={3}
  8. 	onZoomChanged={() => this.onZoomChanged()}
  9. 	onClick={() => { this.props.handleMouseClickOnMap() }}
  10. >

在属于GoogleMap组件的onLoad属性内部，我这样做了：

  1. onMapLoad = (map) => {
  2. 	map.setMapTypeId('hybrid')
  4. 	this.mapOptions = {
  5. 	   zoomControl: true,
  6. 	   streetViewControl: false,
  7. 	   fullscreenControl: false,
  8. 	   mapTypeControlOptions: {
  9. 		style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
  10. 		position: google.maps.ControlPosition.TOP_CENTER,
  11. 	   },
  12. 	   mapTypeControl: true,
  13. 	   zoomControlOptions: {
  14. 		style: google.maps.ZoomControlStyle.SMALL,
  15. 		position: google.maps.ControlPosition.LEFT_CENTER,
  16. 	   },
  17. 	   labels:true
  18. 	}
  20. 	this.setState({
  21. 		theMap: map
  22. 	})
  23. }

这种方式使得当您移动地图或触发地图的重新渲染时，onLoad函数不会受到影响。

英文:

I solved my question. I define a variable here, that called: mapOptions

  1. constructor(props) {
  2. 	super(props)
  4. 	this.state = {
  5.       ....
  6. 	}
  7. 	this.myRef = React.createRef();
  9.     this.mapOptions = undefined
  10. }

Inside my GoogleMap component i did this

  1. &lt;GoogleMap
  2. 	ref={this.myRef}
  3. 	mapContainerStyle={{ width: &#39;100%&#39;, height: &#39;100%&#39; }}
  4. 	center={center}
  5. 	options={this.mapOptions}
  6. 	onLoad={(map) =&gt; { this.onMapLoad(map) }}
  7. 	zoom={3}
  8. 	onZoomChanged={() =&gt; this.onZoomChanged()}
  9. 	onClick={() =&gt; { this.props.handleMouseClickOnMap() }}
  10. &gt;

And inside the prop onLoad that belongs to GoogleMap component i did this:

  1. onMapLoad = (map) =&gt; {
  2.   map.setMapTypeId(&#39;hybrid&#39;)
  4.   this.mapOptions = {
  5.    zoomControl: true,
  6.    streetViewControl: false,
  7.    fullscreenControl: false,
  8.    mapTypeControlOptions: {
  9.     style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
  10.     position: google.maps.ControlPosition.TOP_CENTER,
  11.    },
  12.    mapTypeControl: true,
  13.    zoomControlOptions: {
  14.     style: google.maps.ZoomControlStyle.SMALL,
  15.     position: google.maps.ControlPosition.LEFT_CENTER,
  16.    },
  17.    labels:true
  18.   }
  20.  this.setState({
  21.    theMap: map
  22.  })
  23. }

With this way when you move the map or something that force a re render to the map, onLoad function does not affect.

huangapple
  • 本文由 发表于 2023年7月12日 23:25:04
  • 转载请务必保留本文链接：https://go.coder-hub.com/76672189.html
  • google-maps
  • react-google-maps-api
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定