Карты Google создают маркер с геолокации

Question

С помощью реакции я пытаюсь создать карты Google с маркерами, которые применяются к адресу вместо значений широты и долготы. Как вы можете видеть, компонент создает тег скрипта при монтировании и инициализирует карту и маркер с помощью функций google.maps .... Если я создаю маркер с lat / lng, он работает нормально, но вместо этого я хочу искать по адресу. Итак, вот мой код, вы можете найти ошибку? Я не использую никаких пакетов и также хотел бы придерживаться этого. (НЕТ ПАКЕТОВ!) Еще один вопрос - в каком формате я должен написать эти адреса. Улица, почтовый индекс, город?

Переполнение стека требует еще текста, извините за повторение.

export interface ProjectsListMapProps {
}

export default class ProjectsListMap extends React.Component<ProjectsListMapProps> {
  constructor(props: ProjectsListMapProps) {
    super(props);
    this.renderMap = this.renderMap.bind(this);
    this.mapContainer = this.mapContainer.bind(this); 
    this.codeAddress = this.codeAddress.bind(this);
  }

  componentDidMount() {
    if (!document.querySelectorAll(`[src="${'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY'}"]`).length) { 
      document.body.appendChild(Object.assign(
        document.createElement('script'), {
          type: 'text/javascript',
          src: 'https://maps.googleapis.com/maps/api/js',
          onload: () => this.renderMap()
        }
      ));
    }
  }

  renderMap() {
    const coords = { lat: 41.375885, lng: 2.177813 };
    const el = document.getElementById('map');
    if (el) {
      const map = new google.maps.Map(el, {
        zoom: 16,
        center: {
          lat: coords.lat,
          lng: coords.lng
        }
      });
      const geocoder = new google.maps.Geocoder();
      this.codeAddress(geocoder, map);
      return map;
    }
    else {
      return null;
    }
  }

  codeAddress(geocoder: any, map: any) {
    geocoder.geocode({'address': 'Budapest'}, function(results: any, status: any) {
      console.log(results);

      if (status === 'OK') {
        map.setCenter(results[0].geometry.location);
        const marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
        });
        return marker;
      } 
      else {
        return null;
      }
    });
  } 

  render() {
    return(
      <div className="card map-holder">
        <div id="map" />
      </div>
    );
  }
}

Мой журнал возвращает пустой массив в результате.

Проверить: https://codepen.io/mblmarlon/pen/PoqzjXy для примера

Answer 1

Похоже, ваш код использует Google Maps JavaScript Служба геокодирования, а не геолокация.

После проверки кажется, что служба геокодирования работает правильно, однако вы все еще жестко кодируете значение своего адреса в коде. Чтобы помочь вам в дальнейшем, я настраиваю ваш код и добавляю поле ввода текста для вашего адреса. Вот пример кода .

var map;
class BookSlider extends React.Component {
  constructor(props) {
    super(props);
    this.renderMap = this.renderMap.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleClick = this.handleClick.bind(this);
    this.state = {
      input: ""
    };
  }

  componentDidMount() {
    // ADD API KEY HERE
    if (
      !document.querySelectorAll(
        `[src="${"https://maps.googleapis.com/maps/api/js?key=API_KEY"}"]`
      ).length
    ) {
      document.body.appendChild(
        Object.assign(document.createElement("script"), {
          type: "text/javascript",
          // ADD API KEY HERE
          src:
            "https://maps.googleapis.com/maps/api/js?key=API_KEY",
          onload: () => this.renderMap()
        })
      );
    }
  }

  renderMap() {
    const coords = { lat: 41.375885, lng: 2.177813 };
    const el = document.getElementById("map");

    if (el) {
      map = new google.maps.Map(el, {
        zoom: 16,
        center: {
          lat: coords.lat,
          lng: coords.lng
        }
      });

      return map;
    } else {
      return null;
    }
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  handleClick(event) {
    const geocoder = new google.maps.Geocoder();
    this.codeAddress(geocoder);
    event.preventDefault();
  }

  // THIS CRASHES if you comment it out //

  codeAddress(geocoder) {
    var address = this.state.input;
    geocoder.geocode({ address: address }, function(results, status) {
      console.log(results);
      if (status === "OK") {
        map.setCenter(results[0].geometry.location);
        const marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
        });
        return marker;
      } else {
        return null;
      }
    });
  }

  render() {
    return (
      <section className="partial-book-slider">
        <h1>ADD YOUR API KEY TO MAKE IT WORKIN</h1>
        <input
          id="input"
          name="input"
          value={this.state.input}
          onChange={this.handleInputChange}
        />
        <button id="submit" onClick={this.handleClick}>
          {" "}
          Search
        </button>

        <div className="card map-holder">
          <div id="map" />
        </div>
      </section>
    );
  }
}
/*
 * Render the above component into the div#app
 */
React.render(<BookSlider />, document.getElementById("app"));