Question

任何人都可以帮助我如何使用geolocation和附近的search（）反应来使用Google API查找附近的餐馆。我已经在Java脚本中实现了它，但是在React中不能确切地做到这一点！我已经在React中实现了一部分。下面是我在app.js（container）中的代码：

执行以下代码，显示当前位置的地图。

import React from 'react';
import { GoogleApiWrapper, InfoWindow, Map, Marker } from 'google-maps-react';

import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showingInfoWindow: false,
      activeMarker: {},
      selectedPlace: {}
    }
    // binding this to event-handler functions
    this.onMarkerClick = this.onMarkerClick.bind(this);
    this.onMapClick = this.onMapClick.bind(this);
  }

  onMarkerClick = (props, marker, e) => {
    //alert(props.zoom);
     this.setState({
      selectedPlace: props,
      activeMarker: marker,
      showingInfoWindow: true
    });
  }

  onMapClick = (props) => {
    //alert(props.xs);
    if (this.state.showingInfoWindow) {
      this.setState({
        showingInfoWindow: false,
        activeMarker: null
      });
    }
  }

  createMarkers = (props) => {
    for (var i = 0; i < 20; i++){
    this.onMarkerClick(results[i])
    }}

  render() {
    const style = {
      width: '100vw',
      height: '150vh',
      'marginLeft': 'auto',
      'marginRight': 'auto'
    }

    return (
      <Map
        item
        xs = { 12 }
        style = { style }
        google = { this.props.google }
        onClick = { this.onMapClick }
        zoom = { 14 }
        initialCenter = {{ lat: 1.346648, lng: 103.84991200 }}
      >
        <Marker
          onClick = { this.onMarkerClick }
          title = { 'Home' }
          position = {{ lat: 1.346648, lng: 103.84991200 }}
          name = { 'Home' }
        />
        <InfoWindow
          marker = { this.state.activeMarker }
          visible = { this.state.showingInfoWindow }
        >
          <Paper>
            <Typography
              variant = 'headline'
              component = 'h4'
            >
              Home
            </Typography>
            <Typography
              component = 'p'
            >
               Bishan
            </Typography>
          </Paper>
        </InfoWindow>

从下面几行中我得到一个错误，当我尝试创建一个按钮时，“类型参数”只能在.ts文件中使用。请指导我该错误是什么意思，如何解决？

        <Marker
         <button onClick = {this.createMarkers}>Try Me</button>

         />
         <InfoWindow
          marker = { this.state.activeMarker }
          visible = { this.state.showingInfoWindow }
        >
          <Paper>
            <Typography
              variant = 'headline'
              component = 'h4'
            >
              {props.name}
            </Typography>
            <Typography
              component = 'p'
            >
            {props.vicinity}            
            </Typography>
          </Paper>
        </InfoWindow>

      </Map>




    );
  }
}

export default GoogleApiWrapper({
    api: (process.env.API key)
})(App)

Answer 1

首先，您需要将输入的地址转换为lat / lng

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Restaurantes</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/YOUR_BUNDLE")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</head>

（别忘了初始化函数，例如：）

 function codeAddress() {
    var address = addressForSearch;
    geocoder.geocode(
      {
        address: address,
      },
      function(results, status) {
        if (status == 'OK') {
          map.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location,
          });
        } else {
          alert(
            'Geocode was not successful for the following reason: ' +
              status,
          );
        }
      },
    );
  }

要执行搜索，您可以这样做：

function initMap() {
  geocoder = new google.maps.Geocoder();
  codeAddress();
  ..

React：如何在反应中使用地理位置和附近搜索来查找附近的餐馆

1 个答案: