Как использовать картографические сервисы Google с динамически обновляемым ключом API Google? - PullRequest
Новая
       28

Как использовать картографические сервисы Google с динамически обновляемым ключом API Google?

0 голосов
/ 15 февраля 2019

Я разрабатываю админ-панель для управления некоторыми пользователями с помощью REACT.Таким образом, я использую сторонний модуль реагировать-google-maps для включения картографических сервисов Google с помощью динамически изменяемого ключа API Google от администратора.Здесь, после изменения ключа API администратором, ссылка API карты Google не обновляется новыми значениями, она сохраняет старые значения до тех пор, пока я не обновлю страницу. 

import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  LoadScript,
  withProps,
  Circle,
  Marker
} from "react-google-maps";
import Geocode from "react-geocode";

var locationUpdate = document.getElementsByClassName('location');

const CustomSkinMap = withScriptjs(withGoogleMap(props => (
  <GoogleMap
  ref={props.onMapLoad}
  center={{ lat: props.center.lat, lng: props.center.lng }}
  defaultZoom={13}
  defaultCenter={{ lat:props.lat, lng: props.lng }}
  onDragEnd={props.onDragEnd}
  onBoundsChanged={props.onBoundsChanged}
  defaultOptions={{
    scrollwheel: true,
    disableDefaultUI: true,
    defaultVisible: true,
    zoomControl: true
  }
}
/>
)
)
);

class LocationDetails extends React.Component {
  constructor(props) {
    super(props);
...
  render() {
    const { classes } = this.props;
    const { lat, lng, bounds, center } = this.state;
    var url = `https://maps.googleapis.com/maps/api/js?key=${this.state.googleApi}&libraries=places`
    const google = window.google;
    console.log(google, this.props);
    console.log('render', this.state.googleApi);
    return (
      <GridContainer>
        <GridItem xs={12} sm={12} md={6}>
          <Card>
        <FormHelperText error={!!this.state.errors}>
        {this.state.errors + (this.state.errors ? ' *' : '')}
        </FormHelperText>
            <CardBody>
              <CustomSkinMap
                onBoundsChanged={this.onBoundsChanged}
                onMapLoad={this.handleMapLoad}
                onDragEnd={this.handleMapDrag}
                onSearchBoxMounted={this.handleSearchBoxMounted}
                bounds={bounds}
                onPlacesChanged={this.handlePlacesChanged}
                onCenterChanged={this.onCenterChanged}
                center={center}
                lat={lat}
                lng={lng}
                googleMapURL={url}
                loadingElement={<div style={{ height: `100%` }} />}
                containerElement={
                  <div
                    style={{
                      height: `280px`,
                      borderRadius: "6px",
                      overflow: "hidden"
                    }}
                  />
                }
                mapElement={<div style={{ height: `100%` }} />}
              />
              <img
              style={{
                position: 'absolute',
                top: '50%',
                left: '50%'
              }}
                    src={marker} alt="..." />
              </CardBody>
          </Card>
        </GridItem>
      </GridContainer>
    );
  }
}

Здесь customSkinmap с реквизитами, переданными в GoogleMap из реагировать-Google-карты

...