集中谷歌地图问题

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 start 运行应用程序或刷新页面时，它会在海洋中的某个地方居中。\

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 中。

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

这是我的working code 的代码 sn-p：

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 密钥以查看代码的工作方式。你可以参考我上面的工作代码。