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

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

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

      &lt;GoogleMap
        ref={this.myRef}
        mapContainerStyle={{width:&#39;100%&#39;, height:&#39;100%&#39; }}
        center={center}
        options={{
          zoomControl: false,
          streetViewControl: false,
          fullscreenControl: false,
          mapTypeId:&#39;satellite&#39;,
          mapTypeControl: true,
          mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.TOP_CENTER,
          },
        }}
        onLoad={(map) =&gt; {this.onMapLoad(map)}}
        zoom={3}
        onZoomChanged={() =&gt; this.onZoomChanged()}
        onClick={() =&gt; {this.props.handleMouseClickOnMap()}}
      &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的变量。

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

&lt;GoogleMap
	ref={this.myRef}
	mapContainerStyle={{ width: &#39;100%&#39;, height: &#39;100%&#39; }}
	center={center}
	options={this.mapOptions}
	onLoad={(map) =&gt; { this.onMapLoad(map) }}
	zoom={3}
	onZoomChanged={() =&gt; this.onZoomChanged()}
	onClick={() =&gt; { this.props.handleMouseClickOnMap() }}
&gt;

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

onMapLoad = (map) =&gt; {
  map.setMapTypeId(&#39;hybrid&#39;)

  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.

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

发表评论

匿名网友

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

确定