Question

我一直在使用react-google-maps包（https://github.com/tomchentw/react-google-maps）。该组件成功连接到地图API，因为我收到与该密钥相关的各种控制台警告，但没有任何东西是渲染 - 并且没有错误消息。我错过了一些明显的东西吗？

import React from 'react';
import ReactDOM from 'react-dom';
import {GoogleMap, Loader, Marker} from "react-google-maps";
import { default as ScriptjsLoader } from "react-google-maps/lib/async/ScriptjsLoader";

export default class MapComponent extends React.Component {

  constructor() {
    super();
    this.state = {
      markers: [{
        position: {
          lat: 25.0112183,
          lng: 121.52067570000001,
        },
        key: `Taiwan`,
        defaultAnimation: 2,
      }]
    }
}

 /*
  * This is called when you click on the map.
  * Go and try click now.
  */
 handleMapClick(event) {
   let { markers } = this.state;
   markers = update(markers, {
     $push: [
       {
         position: event.latLng,
         defaultAnimation: 2,
         key: Date.now()
       },
     ],
   });
   this.setState({ markers });

   if (markers.length === 3) {
     this.props.toast(
       `Right click on the marker to remove it`,
       `Also check the code!`
     );
   }
 }

 handleMarkerRightclick(index, event) {
   /*
    * All you modify is data, and the view is driven by data.
    * This is so called data-driven-development. (And yes, it's now in
    * web front end and even with google maps API.)
    */
   let { markers } = this.state;
   markers = update(markers, {
     $splice: [
       [index, 1],
     ],
   });
   this.setState({ markers });
 }

 renderNewBehavior() {
   return (
     <ScriptjsLoader
       hostname={"maps.googleapis.com"}
       pathname={"/maps/api/js"}
       query={{libraries: `geometry,drawing,places` }}
       loadingElement={
         <div {...this.props} style={{ height: `100%` }}>
        LOADING
         </div>
       }
       containerElement={
         <div {...this.props} style={{ height: `100%` }} />
       }
       googleMapElement={
         <GoogleMap
           ref={googleMap => {
             if (!googleMap) {
               return;
             }
             console.log(googleMap);
             console.log(`Zoom: ${ googleMap.getZoom() }`);
             console.log(`Center: ${ googleMap.getCenter() }`);
           }}
           defaultZoom={3}
           defaultCenter={{ lat: -25.363882, lng: 131.044922 }}
           onClick={this.handleMapClick}
         >
           {this.state.markers.map((marker, index) => {
             return (
               <Marker
                 {...marker}
                 onRightclick={this.handleMarkerRightclick.bind(this, index)}
               />
             );
           })}
         </GoogleMap>
       }
     />
   );
 }

 render() {
return this.renderNewBehavior()
 }

}
export default MapComponent

Answer 1

我通过将包含Div元素设置为＆＃39; style = {{height：＆＃39; 500px＆＃39;我不知道为什么会这样，但确实如此！

React Component不会渲染，但没有错误消息

1 个答案: