reactjs @react-google-maps/API未显示标记

fnvucqvd 于 2023-03-08 发布在 React

关注(0)|答案(1)|浏览(107)

我尝试控制台日志，但它不会显示什么位置是由标记使用。

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获取用户的当前位置，但它不会工作。

reactjs

来源：https://stackoverflow.com/questions/75650256/react-google-maps-api-is-not-showing-marker

1条答案

按热度按时间

fhg3lkii1#

你只需要在你的<Marker />组件中包含onLoad props，并使用你的onLoad函数作为prop中的值，以便在加载时调用它。

<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
希望这有帮助！

赞(0）回复(0）举报 2023-03-08

我来回答

reactjs @react-google-maps/API未显示标记

1条答案

相关问题

热门标签

最新问答