集中 google 地图问题

Question

import React, {
  useState
} from "react";

import GoogleMapReact from "google-map-react";

function GMap() {
  const [latLgn, setLatLgn] = useState([{
      lng: 24.7536,
      lat: 59.437
    },
    {
      lng: 24.7303,
      lat: 59.4393
    },
    {
      lng: 24.7387,
      lat: 59.4497
    },
  ]);
  const [tallinn] = useState({
    center: { // where i want to be centerd
      lng: 24.7536,
      lat: 59.437,
    },
    zoom: 10,
  });



  // Fit map to its bounds after the api is loaded
  const apiIsLoaded = (map, maps, latlgn) => {
    // Get bounds by our latlgn
    const bounds = getMapBounds(map, maps, latlgn);
    // Fit map to bounds
    map.fitBounds(bounds);
    // Bind the resize listener
    bindResizeListener(map, maps, bounds);
  };

  // Re-center map when resizing the window
  const bindResizeListener = (map, maps, bounds) => {
    maps.event.addDomListenerOnce(map, "idle", () => {
      maps.event.addDomListener(window, "resize", () => {
        map.fitBounds(bounds);
      });
    });
  };

  // Return map bounds based on list of places
  const getMapBounds = (map, maps, pins) => {
    const bounds = new maps.LatLngBounds();

    pins.forEach((pin) => {
      bounds.extend(new maps.LatLng(pin[1], pin[0]));
    });
    return bounds;
  };

  return ( <
    div >
    <
    div style = {
      {
        height: "100vh",
        width: "100%"
      }
    } >
    <
    GoogleMapReact bootstrapURLKeys = {
      {
        key: AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk
      }
    }
    defaultCenter = {
      tallinn.center
    }
    defaultZoom = {
      tallinn.zoom
    }
    onGoogleApiLoaded = {
      ({
        map,
        maps
      }) => apiIsLoaded(map, maps, latLgn)
    }
    yesIWantToUseGoogleMapApiInternals >
    {
      latLgn.map((item, index) => ( <
        div lat = {
          item[1]
        }
        lng = {
          item[0]
        }
        key = {
          index
        } > 
        </div>
      ))
    } </GoogleMapReact>
    </div> 
    </div>
  );
}
export default Gmap

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我在集中渲染地图时遇到问题。
尽管我的状态为 docs 中所述的“lat”和“lng”，但当我运行使用 npm 启动或刷新页面的应用程序时，它会在海洋中的某个地方居中.\

PS。我将只粘贴我的“地图”组件。

import React, { useState } from "react";

import GoogleMapReact from "google-map-react";

export default function GMap() {
  const [latLgn, setLatLgn] = useState([{
      lng: 24.7536,
      lat: 59.437
    },
    {
      lng: 24.7303,
      lat: 59.4393
    },
    {
      lng: 24.7387,
      lat: 59.4497
    },
  ]);
  const [tallinn] = useState({
    center: { // where i want to be centerd
      lng: 24.7536,
      lat: 59.437,
    },
    zoom: 10,
  });

 

  // Fit map to its bounds after the api is loaded
  const apiIsLoaded = (map, maps, latlgn) => {
    // Get bounds by our latlgn
    const bounds = getMapBounds(map, maps, latlgn);
    // Fit map to bounds
    map.fitBounds(bounds);
    // Bind the resize listener
    bindResizeListener(map, maps, bounds);
  };

  // Re-center map when resizing the window
  const bindResizeListener = (map, maps, bounds) => {
    maps.event.addDomListenerOnce(map, "idle", () => {
      maps.event.addDomListener(window, "resize", () => {
        map.fitBounds(bounds);
      });
    });
  };

  // Return map bounds based on list of places
  const getMapBounds = (map, maps, pins) => {
    const bounds = new maps.LatLngBounds();

    pins.forEach((pin) => {
      bounds.extend(new maps.LatLng(pin[1], pin[0]));
    });
    return bounds;
  };

  return (
    <div>
      <div style={{ height: "100vh", width: "100%" }}>
        <GoogleMapReact
          bootstrapURLKeys={{key: AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk }}
          defaultCenter={tallinn.center}
          defaultZoom={tallinn.zoom}
          onGoogleApiLoaded={({ map, maps }) => apiIsLoaded(map, maps, latLgn)}
          yesIWantToUseGoogleMapApiInternals
        >
          {latLgn.map((item, index) => (
            <div lat={item[1]} lng={item[0]} key={index}< </div>
          ))}
        </GoogleMapReact>
      </div>
    </div>
  );
}

ps。让我知道我是否应该提供更多信息

更新

我创建了一个示例项目here。

Answer 1

我检查了你的代码，发现了一些事情。

首先，在您的 getMapBounds 函数中，返回的边界为空。这是因为 pin[1] 和 pin[0] 的值是 undefined。这可能就是为什么地图像 this 一样以海洋为中心的原因，因为这是世界的中心，坐标是 0,0。您必须改用 pin.lat 和 pin.lng，这样它才能正确填充边界值。

其次，您似乎想在 latLgn 的坐标上放置标记。为此，您可以按照 google-map-react 文档中提到的 AnyReactComponent 函数，而不是将 div 直接放在 latLgn.map.[=31= 中]

最后，在你的 latLgn.map 中，你不能使用 item[1] 和 item[0]，因为它们也是 undefined 而不是使用 item.lat 和 item.lng.

这是我的 working code 的代码片段：

import React, { useState } from "react";
import "./style.css"
import GoogleMapReact from "google-map-react";

const AnyReactComponent = ({ text }) => <div>{text}</div>;
export default function GMap() {
  const [latLgn, setLatLgn] = useState([{
      lng: 24.7536,
      lat: 59.437
    },
    {
      lng: 24.7303,
      lat: 59.4393
    },
    {
      lng: 24.7387,
      lat: 59.4497
    },
  ]);
  const [tallinn] = useState({
    center: { // where i want to be centerd
      lng: 24.7536,
      lat: 59.437,
    },
    zoom: 10,
  });

 

  // Fit map to its bounds after the api is loaded
  const apiIsLoaded = (map, maps, latlgn) => {
    // Get bounds by our latlgn
    const bounds = getMapBounds(map, maps, latlgn);
    // Fit map to bounds
    map.fitBounds(bounds);
    // Bind the resize listener
    bindResizeListener(map, maps, bounds);
  };

  // Re-center map when resizing the window
  const bindResizeListener = (map, maps, bounds) => {
    maps.event.addDomListenerOnce(map, "idle", () => {
      maps.event.addDomListener(window, "resize", () => {
        map.fitBounds(bounds);
      });
    });
  };

  // Return map bounds based on list of places
  const getMapBounds = (map, maps, pins) => {
    const bounds = new maps.LatLngBounds();

    pins.forEach((pin) => {
      bounds.extend(new maps.LatLng(pin.lat, pin.lng));
      console.log(pin[0])
    });
    return bounds;
  };

  return (
    <div>
      <div style={{ height: "100vh", width: "100%" }}>
        <GoogleMapReact
          bootstrapURLKeys={{key: "YOUR_API_KEY" }}
          defaultCenter={tallinn.center}
          defaultZoom={tallinn.zoom}
          onGoogleApiLoaded={({ map, maps }) => apiIsLoaded(map, maps, latLgn)}
          yesIWantToUseGoogleMapApiInternals
        >
        {latLgn.map((item, index) => (
            <AnyReactComponent lat={item.lat} lng={item.lng} key={index} text={"(" +item.lat  + "," + item.lng +")"}> </AnyReactComponent>
          ))}
        </GoogleMapReact>
      </div>
    </div>
  );
}

我也在评论区看到了你的问题。您可以使用 stackblitz 之类的在线 IDE 来提供代码的 sscce，只需删除 API 键即可。您可以在问题中注明您需要输入 API 键才能查看代码的工作原理。你可以参考我上面的工作代码。

集中 google 地图问题

Centralize google map issue

reactjs

google-maps

react-google-maps