javascript - 如何在第一次 react 渲染后更改谷歌地图语言？

Question

我使用https://github.com/tomchentw/react-google-maps 。我需要通过单击按钮更改 map 语言。我只能将其更改一次，例如从 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/

PS，对不起我的英语

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。不支持这种情况，并且控制台中通常会显示以下错误:

You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

为了防止此类冲突，可以清除 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>
    )
  }
}