Question

大家好，我试图在react.js中实现google maps，但是地图显示的很好，但是当我尝试显示标记时，什么也没有显示。如果我删除了经度和纬度值，则标记将显示在地图顶部。但是，如果我向其中添加经度和纬度值，则它将停止显示。有人可以帮忙吗？

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
import marker from './marker.png';
import { geolocated } from 'react-geolocated';
const AnyReactComponent = ({ text }) => (
  <div>
    <img src={marker} style={{ height: '50px', width: '50px' }} />
  </div>
);






export default class Map extends Component {
  static defaultProps = {
    zoom: 11,
  };

  Componentwillmount() {
    console.log(this.props.center.latitude);
  }



  render() {
    return (
      <div className="google-map" style={{ width: '100%', height: '2000px', backgroundColor: 'red' }}>
        <GoogleMapReact
          options={{
            styles:ExampleMapStyles
        }}
         center={this.props.center} defaultZoom={this.props.zoom}>
        <AnyReactComponent
            lat={59.955413}
            lng={30.337844}
            text={'Kreyser Avrora'}
          />
        </GoogleMapReact>
      </div>
    );
  }
}

Answer 1

我认为您需要回答的主要问题是：您的中心道具是什么？我在沙箱中使用了您的代码，并做了一些小的改动：我使用了相同的纬度/经度，应在其中绘制您的标记，以便一眼就能看到它是否真正显示出来。它是： https://codesandbox.io/s/00p1ry2v0v

export default class Map extends Component {
  static defaultProps = {
    zoom: 11,
    center: {
      lat: 49.955413,
      lng: 30.337844
    }
  };

  render() {
    const mapStyles = {
      width: "100%",
      height: "100%"
    };
    return (
      <div
        className="google-map"
        style={{ width: "100%", height: "2000px", backgroundColor: "red" }}
      >
        <GoogleMapReact
          style={mapStyles}
          center={this.props.center}
          defaultZoom={this.props.zoom}
        >
          <AnyReactComponent
            lat={49.955413}
            lng={30.337844}
            text={"Kreyser Avrora"}
          />
        </GoogleMapReact>
      </div>
    );
  }
}

因此，请确保以正确的初始中心位置开始地图。：）

Answer 2

文档显示您可以使用<AnyReactCompenent/>，如果您想拥有自己的标记或文本，可以使用<GoogleMapReact></GoogleMapReact>。但是，如果您希望使用默认标记，则必须将其作为属性传递到onGoogleApiLoaded组件中。文档提到“您可以使用yesIWantToUseGoogleMapApiInternals访问Google Maps地图和地图对象，在这种情况下，您需要将renderMarkers = (map, maps) => {}设置为true”。这只是意味着添加属性的名称，而无需像我一样传递值。根据自述文件中的描述可能并不清楚，但是maps参数实际上是maps API对象（而map当然是当前的Google Map实例）。因此，您应该使用import React, { Fragment } from 'react'; import GoogleMapReact from 'google-map-react'; const GoogleMaps = ({ latitude, longitude }) => { const renderMarkers = (map, maps) => { let marker = new maps.Marker({ position: { lat: latitude, lng: longitude }, map, title: 'Hello World!' }); return marker; }; return ( <Fragment> <div style={{ height: '50vh', width: '100%' }}> <GoogleMapReact bootstrapURLKeys={{ key: 'YOUR KEY' }} defaultCenter={{ lat: latitude, lng: longitude }} defaultZoom={16} yesIWantToUseGoogleMapApiInternals onGoogleApiLoaded={({ map, maps }) => renderMarkers(map, maps)} > </GoogleMapReact> </div> </Fragment> ); }; export default GoogleMaps;函数将两者都传递给方法。

您可以尝试以下方法：

undefined

谷歌地图反应标记未显示

2 个答案: