我使用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,对不起我的英语
最佳答案
显然,这是由于在页面上加载 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>
)
}
}
关于javascript - 如何在第一次 react 渲染后更改谷歌地图语言?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47807355/