Question

我有一个反应应用程序，我正在使用react-google-maps集成谷歌地图。它使用节点服务器获取lat和lng的数据。

Map.js

import { withGoogleMap, GoogleMap, Marker } from "react-google-maps";
import React from 'react';

// Wrap all `react-google-maps` components with `withGoogleMap` HOC
// and name it GettingStartedGoogleMap
export const GettingStartedGoogleMap = withGoogleMap(props => (
<GoogleMap
ref={props.onMapLoad}
defaultZoom={3}
defaultCenter={props.centre[0]}
 onClick={props.onMapClick}>
{props.markers.marker.map((marke, index) => (
  <Marker
    {...marke}
    onRightClick={() => props.onMarkerRightClick(index)}
  />
))}
</GoogleMap>
));
export default GettingStartedGoogleMap;

Layout.js

//some imports
const calculate = (x)=>{
var lt=0;
var lg=0;
var count=0;
x.marker.map((k,i)=>(
lt+=k.position.lat,
lg+=k.position.lng,
count++
))
var centre=[{lat:lt/count, lng:lg/count}];
return centre;
};

export const Layout = props => (

//some div and other elements working fine witout map
     <div id="map"><GettingStartedGoogleMap
   containerElement={
     <div style={{ height: `100%` }} />
   }
   mapElement={
     <div style={{ height: `100%` }} />
   }
   centre={()=>calculate(props.restraun)}
   onMapLoad={_.noop}
   onMapClick={_.noop}
   markers={props.restraun}
   onClick={_.noop}

 /></div>
    //other elements
);
export default Layout;

地图未显示在前端。我用api键包含了脚本标签。尝试将高度从％更改为固定值。但仍然行不通。

数据格式为

restran:{
          marker:[
                  {position:
                            {lat:'value',
                             lng:'value'
                            }
                    key:'value'
                   }]}

如果从节点

打印到控制台上，则正确显示

数据

编辑1：组件本身似乎是错误的，因为我能够打印一些文本而不是标记。

react-google-maps没有显示在屏幕上

0 个答案: