Javascript @react谷歌地图/api“；“谷歌没有定义”；在UseEffect挂钩内访问时出错 我想做什么 在地图上放置一个标记，并计算标记与地图上静态位置之间的距离 如果距离大于1000米，则显示地址不可用 问题描述 无法访问谷歌内部UseEffect 我

@react谷歌地图/api“；“谷歌没有定义”；在UseEffect挂钩内访问时出错 我想做什么

• 在地图上放置一个标记，并计算标记与地图上静态位置之间的距离
• 如果距离大于1000米，则显示地址不可用

问题描述

• 无法访问谷歌内部UseEffect
• 我正确地加载了脚本并按照
• window.google在onmaplick函数中可用，但在我的索引组件或useffect钩子中的任何位置都不可用
• 如何访问它？其他一切都很好

import React，{useRef，useState，useffect，useCallback}来自“React”；
进口{
谷歌地图，
使用加载脚本，
标记，
信息窗口，
MarkerClusterer，
}来自“@react谷歌地图/api”；
导入“@reach/combobox/styles.css”；
导入使用地点完成{
获取地理编码，
getLatLng，
}来自“使用位置自动完成”；
从“../../utils/GetDistanceFromLatroninkm.js”导入GetDistanceFromLatroninkm；
从“反应引导/模式”导入模式；
从“反应引导/按钮”导入按钮；
从'@react google maps/api'导入{Circle}；
常量库=['places'，'geometry']；
常量mapContainerStyle={
宽度：“100%”，
高度：'40vh'，
};
常数中心={
纬度：25.33800452203996，
液化天然气：55.393221974372864，
};
常量选项={
动物控制：对，
};
常数循环次数={
strokeColor:“#00a3a6”，
笔划不透明度：0.4，
冲程重量：2，
填充颜色：“#00a3a6”，
填充不透明度：0.1，
可点击：false，
可拖动：错误，
可编辑：false，
可见：对，
半径：1050，
zIndex:1，
};
常量initialMarker={lat:null，long:null}；
导出默认函数索引（）{
常量{isLoaded，loadError}=useLoadScript({
googleMapsApiKey:process.env.NEXT\u PUBLIC\u GOOGLE\u MAPS\u API\u KEY，
图书馆，
});
const[marker，setMarker]=使用状态（initialMarker）；
const[showmodel，setshowmodel]=useState（false）；
常量handleModalClose=（）=>{
设置显示模式（假）；
设置标记（初始标记）；
};
const onmaclick=（事件）=>{
设定标记({
lat:event.latLng.lat（），
lng:event.latLng.lng（），
});
console.log（window.google）；//可在此处访问
};
常量renderMap=（）=>{
返回(
{标记&&}
);
};
useffect（（）=>{
如果(
//无法在这里访问谷歌
google.maps.geometry.spheremic.ComputedDistanceBetween(
新的google.maps.LatLng（center.lat，center.lng），
新的google.maps.LatLng（marker.lat，marker.lng）
) > 1000
) {
设置显示模式（真）；
}
}，[marker.lat]）；
if（loadError）返回“加载地图时出错”；
如果（！isLoaded）返回“加载映射”；
返回(
{renderMap（）}
地址是不允许的
对不起！我们不在你们地区送货。
选择新地址
);
}

如果您使用的是typescript，只需安装

@types/googlemaps

或将

/*global google*/

添加到我没有安装的文件顶部即可try@LashanFernando谢谢你的回复！我没有使用typescript。你找到解决方案了吗？如果你使用typescript，只需安装

@types/googlemaps

或将

/*global google*/

添加到我没有找到的文件顶部try@LashanFernando谢谢你的回复！我没有使用打字脚本。你找到解决方法了吗？

  Unhandled Runtime Error
ReferenceError: google is not defined

import React, { useRef, useState, useEffect, useCallback } from 'react';
import {
  GoogleMap,
  useLoadScript,
  Marker,
  InfoWindow,
  MarkerClusterer,
} from '@react-google-maps/api';
import '@reach/combobox/styles.css';
import usePlacesAutoComplete, {
  getGeocode,
  getLatLng,
} from 'use-places-autocomplete';
import getDistanceFromLatLonInKm from '../../utils/getDistanceFromLatLonInKm.js';
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';
import { Circle } from '@react-google-maps/api';

const libraries = ['places', 'geometry'];
const mapContainerStyle = {
  width: '100%',
  height: '40vh',
};
const center = {
  lat: 25.33800452203996,
  lng: 55.393221974372864,
};
const options = {
  zoomControl: true,
};

const circleOptions = {
  strokeColor: '#00a3a6',
  strokeOpacity: 0.4,
  strokeWeight: 2,
  fillColor: '#00a3a6',
  fillOpacity: 0.1,
  clickable: false,
  draggable: false,
  editable: false,
  visible: true,
  radius: 1050,
  zIndex: 1,
};

const initialMarker = { lat: null, long: null };

export default function index() {
  const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY,
    libraries,
  });
  const [marker, setMarker] = useState(initialMarker);
  const [showModal, setShowModal] = useState(false);

  const handleModalClose = () => {
    setShowModal(false);
    setMarker(initialMarker);
  };

  const onMapClick = (event) => {
    setMarker({
      lat: event.latLng.lat(),
      lng: event.latLng.lng(),
    });
    console.log(window.google); //accessible here
  };

  const renderMap = () => {
    return (
      <GoogleMap
        mapContainerStyle={mapContainerStyle}
        zoom={14}
        options={options}
        center={center}
        onClick={onMapClick}>
        <Circle center={center} options={circleOptions} />
        {marker && <Marker position={{ lat: marker.lat, lng: marker.lng }} />}
      </GoogleMap>
    );
  };

  useEffect(() => {
    if (
      //cant access google here
      google.maps.geometry.spherical.computeDistanceBetween(
        new google.maps.LatLng(center.lat, center.lng),
        new google.maps.LatLng(marker.lat, marker.lng)
      ) > 1000
    ) {
      setShowModal(true);
    }
  }, [marker.lat]);

  if (loadError) return 'Error Loading Maps';
  if (!isLoaded) return 'Loading Maps';

  return (
    <>
      <div>{renderMap()}</div>
      <Modal
        show={showModal}
        onHide={handleModalClose}
        backdrop="static"
        keyboard={false}
        centered>
        <Modal.Header closeButton>
          <Modal.Title>Address is out of bounds</Modal.Title>
        </Modal.Header>
        <Modal.Body>Sorry ! We Dont Deliver Food In Your Area .</Modal.Body>
        <Modal.Footer>
          <Button onClick={handleModalClose}>Choose New Address</Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}