求助：@react-google-maps/api Marker不显示，HTML地理定位API失效

问题1：Marker组件无法显示且无法打印position参数 #

核心原因及修复步骤 #

• 缺少有效API密钥：你的LoadScript组件中googleMapsApiKey为空字符串，导致Google Maps API未正确加载，Marker自然无法渲染。必须填入在Google Cloud控制台生成的有效API密钥，同时确保已启用Maps JavaScript API。
• 未绑定Marker的onLoad方法：代码中定义了onLoad函数但未传给Marker组件，所以无法触发打印逻辑。需要给Marker添加onLoad属性。

修改后的代码示例 #

import React, { useState, useEffect } from "react";
import { GoogleMap, Marker, LoadScript } from "@react-google-maps/api";

const center = {
  lat: 19.1383,
  lng: 77.321,
};

const style = {
  height: "100vh",
  width: "100%",
};

const Map = () => {
  const onMarkerLoad = (marker) => {
    console.log("Marker实例:", marker);
    console.log("Marker位置:", marker.getPosition()); // 打印position参数
  };

  return (
    <div>
      {/* 替换为你的有效Google Maps API密钥 */}
      <LoadScript googleMapsApiKey="YOUR_GOOGLE_MAPS_API_KEY">
        <GoogleMap mapContainerStyle={style} zoom={15} center={center}>
          <Marker position={center} onLoad={onMarkerLoad} />
        </GoogleMap>
      </LoadScript>
    </div>
  );
};

export default Map;

问题2：HTML Geolocation API获取用户位置失败 #

常见原因及解决方法 #

• 非HTTPS环境限制：除localhost外，Geolocation API仅允许在HTTPS协议下使用。部署时需确保网站使用HTTPS。
• 权限被拒绝：用户可能拒绝了位置权限请求，需添加权限拒绝的处理逻辑。
• 设备位置服务未开启：提示用户检查设备的位置服务是否启用。

集成Geolocation的示例代码 #

import React, { useState, useEffect } from "react";
import { GoogleMap, Marker, LoadScript } from "@react-google-maps/api";

const style = {
  height: "100vh",
  width: "100%",
};

const Map = () => {
  const [userLocation, setUserLocation] = useState(null);
  const [locationError, setLocationError] = useState(null);

  useEffect(() => {
    if (!navigator.geolocation) {
      setLocationError("你的浏览器不支持Geolocation API");
      return;
    }

    navigator.geolocation.getCurrentPosition(
      (position) => {
        const { latitude, longitude } = position.coords;
        setUserLocation({ lat: latitude, lng: longitude });
      },
      (error) => {
        switch (error.code) {
          case error.PERMISSION_DENIED:
            setLocationError("你拒绝了位置权限请求");
            break;
          case error.POSITION_UNAVAILABLE:
            setLocationError("无法获取当前位置");
            break;
          case error.TIMEOUT:
            setLocationError("获取位置超时");
            break;
          default:
            setLocationError("发生未知错误");
        }
      }
    );
  }, []);

  const onMarkerLoad = (marker) => {
    console.log("Marker实例:", marker);
  };

  return (
    <div>
      {locationError && <p>{locationError}</p>}
      <LoadScript googleMapsApiKey="YOUR_GOOGLE_MAPS_API_KEY">
        {userLocation && (
          <GoogleMap
            mapContainerStyle={style}
            zoom={15}
            center={userLocation}
          >
            <Marker position={userLocation} onLoad={onMarkerLoad} />
          </GoogleMap>
        )}
      </LoadScript>
    </div>
  );
};

export default Map;

内容的提问来源于stack exchange，提问作者shoaib ulla khan