Javascript 带有React.js的Google地图API

我现在真的在为谷歌地图api而挣扎。我想做的是在我的应用程序的一个屏幕上点击搜索，它会导航到另一个屏幕，在那里会显示一张地图，根据你的ip配置，所有的语言病理学家都在一个给定的区域。使用api的搜索是：${gkey}

在react.js中，我如何实际渲染它？到目前为止，我的代码如下。这是不完整的每一个教程，我发现，他们正在做一些根本不同于我想做的。我只需要一张地图，上面有这些信息。任何帮助都可以

import React, { useState, useEffect } from "react";
import {
    withGoogleMap,
    withScriptjs,
    GoogleMap,
    Marker,
    InfoWindow
  } from "react-google-maps";
import {getMap} from '../api/gmap';

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8
  });
}

const WrappedMap = withScriptjs(withGoogleMap(Map));

const MapScreen = ({navigation, route}) =>{

    return(
        <div style={{width: '100vw', height: '100vh'}}>
            <WrappedMap 
                googleMapURL={getMap()}
                loadingElement={<div style={{ height: `100%`}}/> }
                containerElement={<div style={{ height: `100%` }} />}
                mapElement={<div style={{ height: `100%` }} />}
            />
        </div>
    )
}

export default MapScreen;

---

我已经成功创建了一个reactjs应用程序，它显示了一个地图，上面显示了所有语言病理学家所在的位置。我使用它在客户端实现PlacesAPI，而这个应用程序不使用任何google地图库。我在这个应用程序中调用了Places文本搜索，就像JavaScript示例在提供的文档中所做的那样

这是我的名片。要运行此代码，您需要在此部分中更改API密钥的值：

const-API\u-KEY=“把你的API\u-KEY放在这里”

希望这对您的用例有所帮助

import axios from 'axios'
import {gkey} from './gkey';

const gmapServer = axios.create({
    baseURL:'http://maps.googleapis.com/'

})


export const getMap = async (item, callback) => {
    const response = await gmapServer.get(
        `maps/api/place/textsearch/json?query=speech+pathologists&key=${gkey}`
    ); 
    callback(response.data)
};