标签: google-map-react

import React from "react";
import GoogleMapReact from "google-map-react";

const AnyReactComponent = ({ text }) => <div>{text}</div>;

export default function AppMapPage() {
  const defaultProps = {
    center: {
      lat: 10.99835602,
      lng: 77.01502627,
    },
    zoom: 11,
  };

  return (
    <div style={{ height: "100vh", width: "100%" }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: "my key" }}
        defaultCenter={defaultProps.center}
        defaultZoom={defaultProps.zoom}
      >
        <AnyReactComponent lat={59.955413} lng={30.337844} text="My Marker" />
      </GoogleMapReact>
    </div>
  );
}

我已经尝试解决它有一段时间了。我正在尝试运行 google-map-react 的简单示例。但是，这不会加载地图。相反，会出现以下错误，并且页面为空白。

google_map_markers.js:100 Uncaught TypeError: Cannot read properties of undefined (reading 'getChildren')
    at o._getState (google_map_markers.js:100:1)
    at …

谷歌地图 API 有两种最流行的反应抽象（从每周 npm 下载量和 github repo 星数来看）。对于像我这样的初学者来说，这非常令人困惑，因为我无法决定这些库能为我的项目带来什么，而不是仅仅通过查看文档来决定什么？

简而言之，使用google-map-react和react-google-maps 的优缺点是什么。我没有在互联网或 SO 上找到任何比较。

我正在用DrawingManager. 我想fillColor用道具修改多边形。我该怎么办？

import React from 'react'
import GoogleMap from 'google-map-react'

export default (props: any) => {
  let {color} = props
  const handleGoogleMapApi = (google: any) => {
    console.log(google)
    var drawingManager = new google.maps.drawing.DrawingManager({
      drawingMode: google.maps.drawing.OverlayType.POLYGON,
      drawingControl: true,
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: ['polygon'],
      },
      polygonOptions: {
        strokeWeight: 5,
        fillOpacity: 0.45,
        fillColor: color,
      },
    })
    google.maps.event.addListener(drawingManager, 'polygoncomplete', (polygon: any) => {
      let points: any = polygon.getPath().getArray()

      points.forEach((point: any) => {
        const {lat, lng} = point
        console.log(lat(), lng()) …

我在我的 React 应用程序中添加了一张带有标记的地图，标记了固定位置，一切正常，但如果我缩小，标记会四处移动并进一步移动到它应该做的位置的右​​侧。

import GoogleMapReact from 'google-map-react';
import { Icon } from '@iconify/react'
import locationIcon from '@iconify/icons-mdi/map-marker'
import './map.css'

interface Props {
  location: {
    address: string,
    lng: number,
    lat: number
  }
}

  const LocationPin = ({ address }: Props["location"]) => (
    <div className="pin">
      <Icon icon={locationIcon} className="pin-icon" style={{ fontSize: '60px' }} />
      <p className="pin-text">{address}</p>
    </div>
  )

export default function SimpleMap(){
  const defaultProps = {
    center: {
      lat: 53.5050,
      lng: -2.0300
    },
    zoom: 12
  };


  return (
    // Important! Always set the …

如何避免“您在此页面上多次包含 Google Maps JavaScript API。这可能会导致意外错误。” 如果我使用 google-map-react 在另一个组件中显示地图和 react-places-autocomplete 来获取地址和坐标？

//LocationMapPage  component that displays the map box and pass the props to it
class LocationMapPage extends Component {

  render() {
    let {latLng,name,address} = this.props.location;
    return (
        <MapBox lat={latLng.lat} lng={latLng.lng} name={name} address={address}/>
    )
  }

}

//MapBox component
import React from "react";
import GoogleMapReact from 'google-map-react';
import apiKey from "../../configureMap";


const Marker = () => <i className="fa fa-map-marker fa-2x text-danger" />

const MapBox = ({lat,lng, name, address}) => {
    const center = …

我想在我的谷歌地图中实现 MarkerClusterer。有没有我可以使用的库或组件。谢谢。这就是我的代码现在的样子。谢谢。

const handleApiLoaded = ({ map, maps }: MapProps) => {
    console.log(maps);
    mapRef.current = { map, maps };
    if (truckData.length > 0) {
      const bounds = getBounds(maps);
      map.fitBounds(bounds);
      bindResizeListener(map, maps, bounds);
    }
  };


 <GoogleMapReact
      bootstrapURLKeys={{ key: `${process.env.REACT_APP_GOOGLE_MAPS_KEY}` }}
      center={mapCenter}
      defaultZoom={14}
      options={{ zoomControlOptions: { position: 7 } }}
      layerTypes={isTraffic ? ["TrafficLayer"] : []}
      yesIWantToUseGoogleMapApiInternals
      onGoogleApiLoaded={handleApiLoaded}
    >
  </<GoogleMapReact>

interface MapProps {
  map: google.maps.Map;
  maps: {
    LatLngBounds: new () => google.maps.LatLngBounds;
  };

如何将标记聚类与 google-map-react 库一起使用。谢谢

我有这个 ：

 <GoogleMapReact
      bootstrapURLKeys={{ key: 'key' }}
      defaultCenter={center}
      defaultZoom={zoom}
>
  <TacoMarker
   link={shop.id}
   lat={latitude}
   lng={longitude}
  />

 </GoogleMapReact>

我可以给你什么道具？它会像scrollEnabled = {false}吗？

我是 React 和 Google Maps 的新手。我正在使用google-map-react将 Google 地图集成到我的 React 应用程序中。我能够成功加载地图并添加标记。

但是在尝试添加 SearchBox 时出现错误。我遵循了此处的文档SeachBox 文档以及问题线程GitHub 问题。但我仍然收到错误。这段代码有什么问题？

这是我的代码

应用程序.js

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
import './App.css';
import Driver from './Driver';
import Passenger from './Passenger';
import SearchBox from './SearchBox';


class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      apiReady: false,
      map: null,
      googlemaps: null
    };
  }

  static defaultProps = {
    center: {
      lat: 6.92,
      lng: 79.86
    },
    zoom: 15, …

当我移动地图时，我有边界，但我不知道如何获取这些边界内包含的标记。我不想非得用new google.map...。我想继续只使用React-Google-Map. 如果这是不可能的，那么我将使用谷歌实例。

我将在下面发布我的代码。我正在控制台注销对谷歌地图的引用以及其中的道具onChange。

Props => \n\nbounds:{nw: {\xe2\x80\xa6}, se: {\xe2\x80\xa6}, sw: {\xe2\x80\xa6}, ne: {\xe2\x80\xa6}}\ncenter:{lat: 53, lng: -7.77000000000001}\nmarginBounds:{nw: {\xe2\x80\xa6}, se: {\xe2\x80\xa6}, sw: {\xe2\x80\xa6}, ne: {\xe2\x80\xa6}}\nsize:{width: 1818, height: 455}\nzoom:10\n__proto__:Object\n\nMap Ref => GoogleMap\xc2\xa0{props: {\xe2\x80\xa6}, context: {\xe2\x80\xa6}, refs: {\xe2\x80\xa6}, updater: {\xe2\x80\xa6}, _getMinZoom: \xc6\x92,\xc2\xa0\xe2\x80\xa6}\n

import React, { Component } from 'react';\nimport GoogleMap from 'google-map-react';\n\nfunction findMarkerIndex(id, markers) {\n  for (let i = markers.length; i--; ) {\n    if (markers[i].id === id) {\n      return i;\n    }\n  }\n  return …

我正在使用 AISHub 构建一个船舶可视化器。我能够使用纬度/经度找到我想要的船只并将它们显示在地图上。但是船只（标记）太多了，我不知道谁是谁。

问题：如何在单击如下标记后动态显示弹出窗口？

下面是我使用的代码最重要的部分：

class BoatMap extends Component {
    constructor(props) {
        super(props);
        this.state = {
            buttonEnabled: true,
            buttonClickedAt: null,
            progress: 0,
            ships: [],
            type: 'All',
            shipTypes: [],
            activeShipTypes: [],
            logoMap: {}
        };
        this.updateRequest = this.updateRequest.bind(this);
        this.countDownInterval = null;
    }

// ... other operations
// ... other operations

    render() {
        return (
            <div className="google-map">
                <GoogleMapReact
                    bootstrapURLKeys={{ key: 'My_KEY' }}
                    center={{
                        lat: this.props.activeShip ? this.props.activeShip.latitude : 42.4,
                        lng: this.props.activeShip ? this.props.activeShip.longitude : -71.1
                    }}
                    zoom={8}
                >
                    {/* Rendering all the …

这在计算机上运行良好，但我只是尝试在移动设备上对其进行测试，但没有onChildMouse识别任何事件处理程序。我试过寻找其他事件处理程序，但这onChildMouseXXX是我在这个包中看到的唯一事件处理程序。如何使可拖动标记工作？是否有我可以使用的其他事件，或解决此问题的已知解决方法？

import React from "react"
import PropTypes from "prop-types"

import GoogleMapReact from 'google-map-react';

const Marker = () => <div className="markerCircle"></div>;

class DraggableMap extends React.Component {
  constructor(props) {
    super(props);


    this.state = {
      center: {
        lat: 0,
        lng: 0
      },
      zoom: 11,
      lat: 0,
      lng: 0,
      draggable: true,
      loaded: false
    }

    this.onChildMouseMove = this.onChildMouseMove.bind(this)
    this.onChildMouseUp = this.onChildMouseUp.bind(this)
    this.onChildMouseDown = this.onChildMouseDown.bind(this)
  }

  componentDidMount() {
    this.setState({
      center: {
        lat: this.props.lat,
        lng: this.props.lng,
      },
      lat: this.props.lat,
      lng: this.props.lng,
      loaded: true
    }) …