0

我正在使用来自 rapid api 的 travel Advisor api，在该 api 中我需要右上角和左下角的纬度和经度值。在谷歌地图中，​​在 onClick 侦听器的帮助下，我能够获取具有值的对象

lat: 59.892012043443664
lng: 30.390082476629736
x: 456.04545497894287
y: 597.1363525390625

我想从中找到右上角和左下角的纬度和经度值。我怎样才能做到这一点 ？

我的 travelAdvisor api 代码

import axios from "axios";

const URL =
  "https://travel-advisor.p.rapidapi.com/restaurants/list-in-boundary";
const options = {
  params: {
    bl_latitude: "11.847676",
    tr_latitude: "12.838442",
    bl_longitude: "109.095887",
    tr_longitude: "109.149359",
  },
  headers: {
    "x-rapidapi-host": "travel-advisor.p.rapidapi.com",
    "x-rapidapi-key": "2b52c313b2msh26a780c5132d231p13a985jsne54b2cb597e7",
  },
};
const placeDetails = async () => {
    try {
      const {
        data: { data },
      } = await axios.get(URL, options);
      return data;
    } catch (error) {
      console.log(error);
    }
};
export default placeDetails;

我的谷歌地图 api 代码

import React from 'react';
import GoogleMapReact from 'google-map-react';

const Map = ({setCoordinates}) => {

    return (
      <div style={{ height: "100vh", width: "100%" }}>
        <GoogleMapReact
          bootstrapURLkeys={{ key: "mykey" }}
          defaultCenter={{ lat: 59.95, lng: 30.33 }}
          defaultZoom={11}
          onClick={(e) => setCoordinates(e)}
        ></GoogleMapReact>
      </div>
    );
}
export default Map;

我的 app.js

import React, { useEffect, useState } from 'react';
import Navbar from './navbar/Navbar';
import Body from './body/Body';
import placeDetails from './body/placedetails/placeDetails';

const App = () => {
    const [places,setPlaces] = useState([]);
    const [coordinates,setCoordinates] = useState({});
    console.log(coordinates);
    console.log('latitude ',coordinates.lat);
    console.log('longitude',coordinates.lng);
    useEffect(()=>{
        placeDetails().then((data)=>{
            console.log(data);
            setPlaces(data);
        })
    },[])
    return (
        <div>
            <Navbar />
            <Body places={places} setCoordinates={setCoordinates}/>
        </div>
    );
}
export default App;
4

0 回答 0