反应谷歌地图标记不居中

Question

我正在写一个小型网络application，希望它可以在电话上使用。我在将地图视图的中心对准红色主光标时遇到问题。即使我已经查看过suggestions，但仍然无法应用。

如果将670150键入邮政编码，年龄22岁，新加坡，符合条件，CHAS橙色，并且仅选择GP和综合诊所的第一个选项，则可以从部署的版本中重现该问题。

有人可以帮我吗？这是相关的代码。

ResultTabs.js

import React from "react";
import PropTypes from "prop-types";
import SwipeableViews from "react-swipeable-views";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Typography from "@material-ui/core/Typography";
// import MyMap from "./myMap";
import TestMap from "./TestMap";
import PcDialog from "./PcDialog";
import GpDialog from "./GpDialog";
// import { display } from "@material-ui/system";
import CompareDialog from "./CompareDialog";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";

function TabContainer({ children, dir }) {
  return (
    <Typography component="div" dir={dir} style={{ padding: 8 * 3 }}>
      {children}
    </Typography>
  );
}

TabContainer.propTypes = {
  children: PropTypes.node.isRequired,
  dir: PropTypes.string.isRequired
};

const useStyles = makeStyles(theme => ({
  root: {
    backgroundColor: theme.palette.background.paper,
    width: "100%"
  }
}));

const ResultTabs = props => {
  const classes = useStyles();
  const theme = useTheme();
  const [value, setValue] = React.useState(0);
  const [state, setState] = React.useState({
    sortByLoc: true
  });

  function handleChange(event, newValue) {
    setValue(newValue);
  }

  function handleChangeIndex(index) {
    setValue(index);
  }

  const [open, setOpen] = React.useState(false);
  const [selectedGP, setSelectedGP] = React.useState({
    properties: { HCI_NAME: "Please Choose a GP" },
    distance: "x",
    price: "x",
    rating: "x"
  });
  const [selectedPC, setSelectedPC] = React.useState({
    Name: "Please choose a Polyclinic",
    distance: "x",
    price: "x",
    rating: "x"
  });
  const [GPName, setGPName] = React.useState("none");
  const [PCName, setPCName] = React.useState("none");

  function handleClickOpen() {
    setOpen(true);
  }

  const handleGPClose = (clinic, name) => {
    setOpen(false);
    clinic.price = "$$";
    clinic.rating = "4.3";
    setSelectedGP(clinic);
    setGPName(name);
  };
  const handlePCClose = (clinic, name) => {
    setOpen(false);
    clinic.price = "$";
    clinic.rating = "4.0";
    setSelectedPC(clinic);
    setPCName(name);
  };

  return (
    <div className={classes.root}>
      <Grid style={{ flexGrow: 1 }} direction="row">
        <Grid container justify="space-evenly">
          <Grid item>Selected GP: {GPName}</Grid>
          <Grid item>
            <p style={{ fontSize: "1em" }}>Selected PolyClinic: {PCName}</p>
            {/* {console.log(selectedGP)} */}
          </Grid>
        </Grid>
      </Grid>
      <Grid style={{ flexGrow: 1 }} direction="row">
        <Grid container justify="center">
          <CompareDialog
            GP={selectedGP}
            PC={selectedPC}
            formData={props.formData}
          />
        </Grid>
      </Grid>
      <hr />
      <AppBar position="static" color="default">
        <Tabs
          value={value}
          onChange={handleChange}
          indicatorColor="primary"
          textColor="primary"
          variant="fullWidth"
        >
          <Tab label="GP" />
          <Tab label="Polyclinic" />
          <Tab label="Map View" />
        </Tabs>
      </AppBar>
      <SwipeableViews
        axis={theme.direction === "rtl" ? "x-reverse" : "x"}
        index={value}
        onChangeIndex={handleChangeIndex}
      >
        <TabContainer dir={theme.direction}>
          {props.GP.map(clinic => {
            return (
              <div key={clinic.properties.id}>
                <GpDialog
                  clinic={clinic}
                  selectedGP={selectedGP}
                  open={open}
                  onClose={handleGPClose}
                />
                <hr />
              </div>
            );
          })}
        </TabContainer>
        <TabContainer dir={theme.direction}>
          {props.PC.map(clinic => {
            return (
              <div key={clinic.id}>
                <PcDialog
                  clinic={clinic}
                  selectedPC={selectedGP}
                  open={open}
                  onClose={handlePCClose}
                />

                <hr />
              </div>
            );
          })}
        </TabContainer>
        <TabContainer dir={theme.direction}>
          {props.currentLoc[0] !== 0 && (
            <TestMap coord={props.currentLoc} GP={props.GP} PC={props.PC} />
          )}
        </TabContainer>
      </SwipeableViews>
    </div>
  );
};

export default ResultTabs;

myMap.js

import React, { Component } from 'react'
import { Map, GoogleApiWrapper } from 'google-maps-react';

const API_KEY = "AIzaSyDsbjEhJ1510KaVtIQJVTIU7at6hiA__6U";

class MyMap extends Component {

    constructor(props) {
        super(props);
        this.state = {
            coord: this.props.coord,
            venues: []
        }
    }


    componentDidMount() {
    //   this.getVenues()
      this.renderMap()
    }

    renderMap = () => {
      loadScript("https://maps.googleapis.com/maps/api/js?key=AIzaSyDsbjEhJ1510KaVtIQJVTIU7at6hiA__6U&callback=initMap")
      window.initMap = this.initMap
    }

    // getVenues = () => {
    //   const endPoint = "https://api.foursquare.com/v2/venues/explore?"
    //   const parameters = {
    //     client_id: "PMHC2WA1VCBHVYOPPSJ0QSBYTLRF4PNJ04OWVWV0PZJ0QFIR",
    //     client_secret: "CULSZZ44YAEBOWBFGPB4BF5ISRXXSNYR0EE3JV3CNE2ZWHV0",
    //     query: "food",
    //     near: "Sydney",
    //     v: "20182507"
    //   }

    // }

    initMap = () => {
        console.log(this.state.coord[1],this.state.coord[0])
      // Create A Map
      var map = new window.google.maps.Map(document.getElementById('map'), {
        center: {lat: this.state.coord[1], lng: this.state.coord[0]},
        zoom: 8
      })

    //   // Create An InfoWindow
    //   var infowindow = new window.google.maps.InfoWindow()

    //   // Display Dynamic Markers
    //   this.state.venues.map(myVenue => {

    //     var contentString = `${myVenue.venue.name}`

    //     // Create A Marker
    //     var marker = new window.google.maps.Marker({
    //       position: {lat: myVenue.venue.location.lat , lng: myVenue.venue.location.lng},
    //       map: map,
    //       title: myVenue.venue.name
    //     })

    //     // Click on A Marker!
    //     marker.addListener('click', function() {

    //       // Change the content
    //       infowindow.setContent(contentString)

    //       // Open An InfoWindow
    //       infowindow.open(map, marker)
    //     })

    //   })



    }

    render() {
      return (
        <main>
          <div id="map"></div>
        </main>
      )
    }
  }

  function loadScript(url) {
    var index  = window.document.getElementsByTagName("script")[0]
    var script = window.document.createElement("script")
    script.src = url
    script.async = true
    script.defer = true
    index.parentNode.insertBefore(script, index)
  }

  export default MyMap;