Google Map API с React. js - PullRequest
Новая
       19

Google Map API с React. js

2 голосов
/ 16 июня 2020

Я действительно борюсь с этим API карты Google в данный момент. Я пытаюсь сделать следующее: на одном экране моего приложения вы нажимаете кнопку поиска, и оно переходит к другому, где отображается карта, где все речевые патологи находятся в данной области на основе вашей конфигурации IP. Поиск с использованием api: https://maps.googleapis.com/maps/api/place/textsearch/json?query=speech+pathologists&key= $ {gkey}.

In response. 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;

gmap. js где находится мой getMap () 

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

1 Ответ

1 голос
/ 19 июня 2020

Я успешно создал приложение reactjs, которое показывает карту, на которой отображается маркер, где находятся все речевые патологи. Я использовал это, используя Google Maps JavaScript Запрос на поиск текста библиотеки Places , который реализует API Places на стороне клиента, и это приложение не использует библиотеки карт Google. Я вызвал текстовый поиск мест в этом приложении точно так же, как пример JavaScript в предоставленных документах.

Вот мой образец кода . Чтобы запустить этот код, вам нужно изменить значение вашего ключа API в этой части: const API_KEY = "PUT_YOUR_API_KEY_HERE";

Надеюсь, это поможет в вашем случае использования.

...