Question

大家好，我想让Google Maps在不同的组件上花费很长的时间，并在此基础上显示标记。但是，当我放置lat和long值时，标记未显示。 this.state.lat和long绝对正确，因为我的地图确实更新了，但找不到标记。任何帮助将不胜感激！

map.js

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={this.props.center.latitude}
            lng={this.props.center.longitude}
            text={'Kreyser Avrora'}
          />
        </GoogleMapReact>
      </div>
    );
  }
}

home.js

import React, { Component } from 'react';
import axios from 'axios';
import './App.css';
import PlacesAutocomplete from 'react-places-autocomplete';
import { geocodeByAddress, geocodeByPlaceId, getLatLng } from 'react-places-autocomplete';
import UserForm from './UserForm.js';
import { classnames } from './helpers';

import marker from './marker.png';

import Nav from './nav';
import Food from './food';

import Tool from './tools';
import Health from './health';
import MapContainer from './Map';
import Map from './Map';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
class Home extends Component {
  constructor() {
    super();
    this.state = {
      zoom: 13,
      maptype: 'roadmap',
      place_formatted: '',
      place_id: '',
      place_location: '',
      address: '',
      value:'',
      latitude: 37.774929,
      longitude: -122.419416,
      marker: [],
      place: [],
      isLoaded2: false,
      places2: [],
      isLoaded: false,
      isLoaded3: false,
    };
  }

render() {
    return (


        <div id="h">
          <Map center={{ lat: this.state.latitude, lng: this.state.longitude }} />

    <div />
    );
  }
}


export default Home;

Answer 1

您尝试获取props对象的以下属性：

<AnyReactComponent
  lat={this.props.center.latitude}
  lng={this.props.center.longitude}
  text={'Kreyser Avrora'}
/>

但是您传递到道具中的对象具有属性lat和lng：

center={{ lat: this.state.latitude, lng: this.state.longitude }}

更改AnyReactComponent以使用this.props.center.lat和.lng应该可以使其工作。

如何在google-map-react中显示google map标记

1 个答案: