如何在第一次反应渲染后更改谷歌地图语言？

Question

我用https://github.com/tomchentw/react-google-maps。我需要通过点击按钮来更改我的地图语言。我只能改变它一次，例如从ja到ar，但不能回到ja。我怎样才能做到这一点？

<MyMapComponent
   key={language}
   googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${key}&language=${this.props.language}`}
   isMarkerShown
   containerElement={
     <div style={{ height: '100%' }} />
   }
   mapElement={
     <div style={{ height: '100%' }} />
   }
   loadingElement={
     <div style={{ height: '100%' }} />
   }
/>

这是没有反应http://jsfiddle.net/2AKqM/的例子

对不起我的英语

Answer 1

显然，它是因为在页面上加载Google Maps API一次时发生冲突而发生的。您可能使用withScriptjs加载Google Maps API，如下所示：

export const MyMapComponent = compose(
  withScriptjs,
  withGoogleMap
)(props => {
  return (
    <GoogleMap googleMapURL={props.googleMapsUrl} defaultZoom={8} defaultCenter={{ lat: -34.397, lng: 150.644 }}>
      <Marker position={{ lat: -34.397, lng: 150.644 }} />
    </GoogleMap>
  )
});

关键是，一旦提供了语言，组件就会重新创建，这又会导致再次加载Google Maps API。不支持该方案，并且在控制台中显示以下错误：

您已在此页面上多次添加Google Maps API。这可能会导致意外错误。

为防止此类冲突，可以清除Google Maps API

window.google.maps = {}; 

在加载另一种语言的API之前。

以下示例演示了如何处理此场景，特别是：

• 加载的Google Maps API用于当前语言存储在缓存中
• 如果已经按照所选语言加载了Google Maps API，则会从缓存中重新存储它，否则会清除并再次加载API

例：

/*global google*/
import React from "react";
import { compose, withProps } from "recompose";
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker
} from "react-google-maps";


const key = "AIzaSyDurZQBXjtSzKeieXwtFeGe-jhZu-HEGQU";

export const MyMapComponent = compose(
  withScriptjs,
  withGoogleMap
)(props => {
  return (
    <GoogleMap googleMapURL={props.googleMapsUrl} defaultZoom={8} defaultCenter={{ lat: -34.397, lng: 150.644 }}>
      <Marker position={{ lat: -34.397, lng: 150.644 }} />
    </GoogleMap>
  )
});


export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      language: 'en',
      nextLanguage: null,
      googleMapsUrl: `https://maps.googleapis.com/maps/api/js?key=${key}&language=en`,
      cacheMaps: {}
    };
  }

  handleChange(e) {
    this.setState({ nextLanguage: e.target.value });
  }

  changeGoogleMapsLanguage = () => {
    this.setState({ googleMapsUrl: `https://maps.googleapis.com/maps/api/js?key=${key}&language=${this.state.nextLanguage}` });
    this.setState({ language: this.state.nextLanguage });

    let cacheMaps = { ...this.state.cacheMaps }
    cacheMaps[this.state.language] = window.google.maps;
    this.setState({ cacheMaps });

    if (this.state.nextLanguage in cacheMaps) {
      window.google.maps = cacheMaps[this.state.nextLanguage];  //load Maps API from cache
      console.log("Loading from cache..");
    }
    else {
      window.google.maps = {}; //clear Maps components 
    }

  }



  render() {
    return (
      <div>
        <input type="text" id="language" defaultValue={this.state.language} onChange={this.handleChange.bind(this)} />
        <button id="localization-button" onClick={this.changeGoogleMapsLanguage.bind(this)} >Change Language</button>
        <MyMapComponent googleMapURL={this.state.googleMapsUrl}
          loadingElement={<div style={{ height: `100%` }} />}
          containerElement={<div style={{ height: `400px` }} />}
          mapElement={<div style={{ height: `100%` }} />}
          key={this.state.googleMapsUrl}
        />
      </div>
    )
  }
}