Question

react-google-maps 不起作用

2016-07-03

1929

javascript google-maps reactjs

我正在构建这个天气应用程序。一切似乎都正常，但我无法让谷歌地图工作。我看到需要 API 密钥，我导入了它。然后在我的项目中安装 react-google-maps 时遵循了它的文档，但它仍然不起作用，但是，我的控制台中不再有错误。

你能看看它，这里出了什么问题吗？请随意克隆它。 https://github.com/garstikaitis/weather-app/blob/master/src/components/google_map.js

http://arsti.net/weather-app/

Answer 1

对于问题中提到的特定应用，我在本地运行该应用时可以看到地图。但是，它非常非常窄。这似乎不是 react-google-maps 问题，而是 HTML 表格布局问题，需要调整地图的宽度。

另外，如果您根本看不到任何地图，则一个常见问题可能是由于将地图的 height 设置为 “100%” 。您将要求父容器高度的 100%，这很容易是一个高度为零的折叠 div ，因此您本质上要求 100% 的零。

以下是使用 @next 版本的 react-google-maps （我撰写本文时当前为 7.0.0）和 React 15.6.1 的示例：

import React from 'react';
import ReactDOM from 'react-dom';
import { withGoogleMap, GoogleMap } from "react-google-maps";
import withScriptjs from "react-google-maps/lib/async/withScriptjs";

const GettingStartedGoogleMap = withScriptjs(withGoogleMap(props => (
  <GoogleMap
    defaultZoom={3}
    defaultCenter={{ lat: -25.363882, lng: 131.044922 }}
  />
)));

ReactDOM.render(
  <div style={{ height: '600px' }}>
    <GettingStartedGoogleMap
      googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.28"
      loadingElement={<div></div>}
      containerElement={ <div style={{ height: `100%` }} /> }
      mapElement={<div style={{ height: `100%` }} />}
    />
  </div>,
  document.getElementById('root')
);

如果您删除外部 div 的固定高度 600px 或将其替换为 100% ，则 div 将折叠，您根本看不到地图。希望这对您有所帮助。