谷歌地图使用地理位置创建标记

Question

使用 react 我正在尝试创建一个带有标记的谷歌地图，它适用于地址而不是 lat/lng 值。如您所见，组件在安装时创建一个脚本标签，并通过 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>
    );
  }
}

My Log 结果返回一个空数组。

查看：https://codepen.io/mblmarlon/pen/PoqzjXy 示例

Answer 1

您的代码似乎使用的是 Google Maps JavaScript 地理编码服务，而不是地理定位。

检查后，地理编码服务现在似乎工作正常，但是您仍在代码中硬编码地址的值。为了进一步帮助您，我调整了您的代码并为您的地址添加了文本输入字段。这是sample code。

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"));