@react-google-maps/api 没有显示标记

Question

我试过控制台日志，但它不会显示标记正在使用什么位置或让 LONE WHAT WILL IT NEED

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 onLoad = (marker) => {
    console.log("marker: ", marker);
  };
  return (
    <div>
      <LoadScript googleMapsApiKey="">
        <GoogleMap mapContainerStyle={style} zoom={15} center={center}>
          <Marker position={center}  />
        </GoogleMap>
      </LoadScript>
    </div>
  );
};

export default Map;

我尝试使用 HTML 的地理定位 api 获取用户的当前位置，但它不会工作

Answer 1

你只需要在你的

onLoad

组件上包含

<Marker />

道具，并使用你的

onLoad

function 作为道具内的值，以便在加载时调用它。它应该是这样的：

<Marker onLoad={onLoad} position={center}  />

进行更改后，我尝试在 codesandbox 上运行您的代码，它工作得很好。你的整个

Map

组件应该是这样的：

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 onLoad = (marker) => {
    console.log("marker: ", marker);
  };
  return (
    <div>
      <LoadScript googleMapsApiKey="">
        <GoogleMap mapContainerStyle={style} zoom={15} center={center}>
          <Marker onLoad={onLoad} position={center} />
        </GoogleMap>
      </LoadScript>
    </div>
  );
};

export default Map;

如果您想查看概念沙盒证明：https://codesandbox.io/s/proof-of-concept-sandbox-on-showing-markers-stzg9g?file=/src/Map.js

希望这有帮助！