标签: react-google-maps

我有以下反应组件，它从“react-google-maps”库加载 GoogleMap。我正在关注文档示例，但我从 getBounds() 函数中获得了未定义的信息。我认为这是由于在地图完全加载之前试图获得边界但找不到解决方案。

@inject("map") @observer
export default class Map extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        const mapStore = this.props.map
        const GettingStartedGoogleMap = withGoogleMap(props => (
            <GoogleMap
                ref={props.onMapLoad}
                style={{
                    height: 100,
                    width: 100,
                }}
                defaultOptions={{ styles: this.mapStyles }}
                defaultZoom={mapStore.zoom}
                defaultCenter={{ lat: mapStore.center.lat, lng: mapStore.center.lng }}>
                {
                    mapStore.markers.map(({ lat, lng }) => {
                        return <Marker
                            position={{ lat, lng }}
                            icon={{
                                url: require('../../images/marker.png')
                            }}
                        />
                    })
                }
            </GoogleMap>
        ))

        return (
            <GettingStartedGoogleMap
                style={{
                    height: 100,
                    width: 100,
                }}
                onMapLoad={(googleMap) …

我正在尝试显示Google地图，并根据Geolocation返回的纬度和经度将地图居中。但是，地图将显示为默认值，而不是由Geolocation值渲染。我在组件状态中设置纬度和经度，并尝试在状态更新后重新呈现组件。但这行不通。下面是我的代码。

MapView.js

import React, { Component } from 'react'
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from 'react-google-maps'
import MapComponent from './MapComponent'

class MapView extends Component {
  constructor(props){
    super(props)
    this.state = {
      currentLatLng: {
        lat: 0,
        lng: 0
      },
      isMarkerShown: false
    }
  }

  componentWillUpdate(){
    this.getGeoLocation()
  }

  componentDidMount() {
    this.delayedShowMarker()
  }

  delayedShowMarker = () => {
    setTimeout(() => {
      this.getGeoLocation()
      this.setState({ isMarkerShown: true })
    }, 5000)
  }

  handleMarkerClick = () => {
    this.setState({ isMarkerShown: false })
    this.delayedShowMarker()
  }

  getGeoLocation = () …

我是React的新手，目前正在尝试学习如何使用react-google-maps库。试图显示地图，其中用户地理位置initialCenter与地图相同。

这是我的代码：

import React from "react";
import { GoogleApiWrapper, Map } from "google-maps-react";

export class MapContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { userLocation: { lat: 32, lng: 32 } };
  }
  componentWillMount(props) {
    this.setState({
      userLocation: navigator.geolocation.getCurrentPosition(
        this.renderPosition
      )
    });
  }
  renderPosition(position) {
    return { lat: position.coords.latitude, lng: position.coords.longitude };
  }
  render() {
    return (
      <Map
        google={this.props.google}
        initialCenter={this.state.userLocation}
        zoom={10}
      />
    );
  }
}

export default GoogleApiWrapper({
  apiKey: "-----------"
})(MapContainer);

通过创建具有用户位置的地图，我得到了initialCenter默认状态值。

我该如何解决？我什至在使用生命周期功能吗？

非常感谢您的帮助

我正在使用 react-google-maps 组件制作带有一个标记的地图。我做到了，它运行良好，但问题是我希望该标记始终居中。

我对谷歌进行了研究，并找到了几种解决方案：一个是通过谷歌 API，但我不明白如何实现 react-google-maps，第二个 - 在地图上添加假标记 - 我认为不是很好的解决方案。

import React from 'react';
import { GoogleMap, withScriptjs, withGoogleMap, Marker} from 'react-google-maps';

function Map() {
    return(
        <GoogleMap
                defaultZoom={13}
                defaultCenter={{lat:54.68916, lng:25.2798}}
        >
           <Marker 
                position={{lat:54.68916, lng:25.2798}}
                draggable={true}
                onDragEnd={(e) => markerDrop(e)}
           />
        </GoogleMap>
    );
}

function markerDrop(event){
    //get values of marker
    let lat = event.latLng.lat();
    let lng = event.latLng.lng();
    //insert values to forms
    document.getElementById('location_latitude').value = lat;
    document.getElementById('location_longitude').value = lng;
    return
}


const WrappedMap = withScriptjs(withGoogleMap(Map));



export default function PickLocation(){
    return(
        <div>
            <WrappedMap 
                googleMapURL={'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSy'} …

我正在尝试获取具有纬度/经度点的对象数组，并Marker为每个对象创建一个，然后将这些Marker对象传递到<MarkerClusterer>组件中。

通过直接复制这里的文档，我可以让它工作。然而，他们的方法与我需要的有点不同。

差异似乎在于点如何映射到组件。

工作代码：

<MarkerClusterer
      options={{imagePath:"https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"}}
    >
      {
        (clusterer) => [
          {lat: -31.563910, lng: 147.154312},
          {lat: -33.718234, lng: 150.363181},
          {lat: -33.727111, lng: 150.371124},
          {lat: -33.848588, lng: 151.209834}
        ].map((location, i) => (
          <Marker
            key={i}
            position={location}
            clusterer={clusterer}
          />
        ))
      }
    </MarkerClusterer>

我的非工作代码：

const listings = [
    { lat: -31.56391, lng: 147.154312 },
    { lat: -33.718234, lng: 150.363181 },
    { lat: -33.727111, lng: 150.371124 },
    { lat: -33.848588, lng: 151.209834 },
  ];
  let testArray = …

我一直在使用一个名为的库，@react-google-maps/api我想将地图中心存储为反应状态，并且我希望用户能够拖动地图，而标记始终保持在地图的中心（超级风格位置选择）

问题是当我调用onCenterChange组件时，它返回未定义的结果

当将map实例（在onLoad回调中收到）存储为反应状态时。地图实例每次都会返回完全相同的中心（我猜状态保存是静态的）

<GoogleMap
        id={id}
        zoom={zoom}
        center={center}
        options={options}
        mapContainerStyle={{ width, height }}
        onLoad={m => {
          if (!map) setMap(m);
        }}
        onCenterChanged={e => {
          console.log(map);
          if (map) {
            console.log(parseCoords(map.getCenter()));
          }
        }}
      >
        {children}
      </GoogleMap>

我需要在 React
Const mapRef 返回错误中为我的谷歌地图设置新的纬度和经度：对象可能为“空”。TS2531
当我使用 let 而不是 React.useRef 时它可以工作。
我认为应该将类型设置为mapRef，但我不知道是哪一个以及在哪里可以找到它。
但我认为 useRef 是更好的解决方案，不是吗？

谷歌地图库：https://www.npmjs.com/package/@react-google-maps/api

const libraries = ["places"];

const CustomMap = () => {
  const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: "MY_API_KEY",
    libraries,
  });

  const options = {
    disableDefaultUI: true,
    zoomControl: true,
  };

  const mapRef = React.useRef();
  const onMapLoad = React.useCallback((map) => {
    mapRef.current = map;
  }, []);

  const panTo = React.useCallback(({ lat, lng }) => {
    if (null !== mapRef.current) {
      // There is error …

我们正在从 转变为google-map-react意味着react-google-maps-api更多原生 Google 地图 API 体验。

在更改之前，我们能够将自定义标记作为 React 组件加载，如下所示：

<GoogleMaps>
  <UserPinContainer lat={userLocation.lat} lng={userLocation.lng}>
    <Tidal.Icon type="UserLocation" text="User" />
  </UserPinContainer>
</GoogleMaps>

从他们的原始 lib 文档中google-map-react，它说：

您可以在地图上渲染很酷的动画反应组件，而不是默认的 Google 地图标记、气球和其他地图组件。

虽然这很棒，但它证明了这个库已经脱离了原生 API...

然而，使用来自react-google-maps-api的新标记API ，React组件是不可能的。他们只期望string | google.maps.Icon | google.maps.Symbol;类型，例如：

<Marker
    icon={{
        path: google.maps.SymbolPath.CIRCLE,
        scale: 7,
    }}
    position={centers[0]}
/>

或者

<Marker position={{ lat: userLocation.lat, lng: userLocation.lng }}>
    <Tidal.Icon img type="UserLocation" text="User" />
</Marker>

我想我可以创建一个真正的自定义标记，例如：

const newMarker = new window.google.maps.Marker(MyComponent)

但没有这样的运气。

对此有什么好的解决方案吗？

我正在使用GoogleMap来自 的组件@react-google-maps/api，但似乎无法找到如何在移动它后获取当前居中的地图坐标（纬度和经度）？

通过搜索，我发现了这篇文章，它提出了类似的问题，但没有一个答案对我有用。下面是我正在测试的代码。

import { GoogleMap, useLoadScript } from "@react-google-maps/api";

const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
});

export default function Test() {
    return (
        <>
            <GoogleMap
                zoom={8}
                center={{lat: 35.6676095, lng: 139.334863}}
                // onCenterChanged={getCenter} - doesn't work
                // onCenterChanged={getCenter()} - doesn't work
                // onCenterChanged={this.getCenter} - doesn't work
                // onCenterChanged={ (e)=> this.getCenter(e)}  - doesn't work
            >
            </GoogleMap>
        </>
    );
}

地图加载得很好，但是一旦我添加了onCenterChanged=道具，一切都会中断，因为该getCenter函数显然没有声明。

我想在移动地图后获得带有中心坐标的变量或状态。我在哪里声明它以及如何使用它？

我在主项目中使用react-google-maps/api库，但我看不到我在地图上绘制的线条。所以我创建了演示项目来尝试相同的代码。有用。但主项目不起作用。我查看了react版本、react-dom版本、react-google-maps/api版本。这三个都是相同的版本。在主要项目中；地图和标记来了。但我想画一个容器或线条，它没有显示。当我双击时，我会将坐标信息发送到控制台。所以我得到了真实的坐标信息，但我看不到线条和容器。为什么我在主项目上看不到线条？

import React from 'react';
import { GoogleMap, useJsApiLoader, DrawingManager } from '@react-google-maps/api';

const containerStyle = {
  width: '800px',
  height: '400px'
};

const center = {
  lat: -3.745,
  lng: -38.523
};

function App() {

  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: "my_Key"
  })

  const onLoad = React.useCallback(function callback(map) {
    const bounds = new window.google.maps.LatLngBounds(center);
    map.fitBounds(bounds);
  }, [])

  function getPaths(polygon) {
    var polygonBounds = polygon.getPath();
    var bounds = [];
    for (var i = 0; i < polygonBounds.length; i++) { …