标签: react-google-maps

我阅读了文档，它方便地概述了可用的道具和方法。请看这里。

我的问题是，给出这里的示例组件：

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

class MyParentComponentWrapper extends Component { 
...

...// inside react component class
mapComponent() {
        const MyMapComponent = withScriptjs(withGoogleMap((props) =>{
            return (
                <GoogleMap
                    defaultZoom={18}
                    defaultCenter={{ lat: props.lat, lng: props.lng }}
                >
                    { props.isMarkerShown && <Marker onPositionChanged={()=>{
// This event will trigger the 
// call to update the state where lat and lng will go.

}} draggable position={{ lat: props.lat, lng: props.lng }} /> }
                </GoogleMap>
            )
        }))

        return (
            <MyMapComponent
                lat={this.state.form.location.latitude} …

这个：

对此：

是否有 API 设置来实现这一点？

我最近尝试实现 tomchentw/react-google-maps，但我似乎无法弄清楚如何自定义标记图标，默认情况下，它显示一个红色图标，它工作正常，但是当我尝试传入图标道具，没有显示标记。

这是我的代码：

/* global google */
import React, { Component } from 'react';
import { MarkerWithLabel } from 'react-google- 
maps/lib/components/addons/MarkerWithLabel';
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
} from 'react-google-maps';
import { compose, withProps, withHandlers } from 'recompose';


const MapWithAMarkerClusterer = compose(
  withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyC3naz5xCZtPlOeMo38InY3GFr4k8A2LO0&v=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `100%` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withScriptjs,
  withGoogleMap
)(props =>
  <GoogleMap
    defaultZoom={11}
    defaultCenter={{ lat: 25.0391667, lng: 121.525 }}
  > …

我是 React 的新手，正在尝试使用谷歌地图来显示方向。我已经能够让它显示单个标记，但还没有找到如何重新配置​​代码以显示方向。以下是我最近的尝试，但它只会显示地图......感谢任何帮助：

import React, { Component } from 'react';
import { withGoogleMap, GoogleMap, DirectionsRenderer } from 'react-google-maps';
class Map extends Component {
   render() {
   const GoogleMapExample = withGoogleMap(props => (
      <GoogleMap
        defaultCenter = { { lat: 40.756795, lng: -73.954298 } }
        defaultZoom = { 13 }
      >

<DirectionsRenderer origin={{ lat: 40.756795, lng: -73.954298 }} destination={{ lat: 41.756795, lng: -78.954298 }} />
      </GoogleMap>
   ));
   return(
      <div>
        <GoogleMapExample
          containerElement={ <div style={{ height: `500px`, width: '500px' }} /> }
          mapElement={ <div style={{ …

我正在尝试使用 package.json 在我的应用程序中实现谷歌地图react-google-maps。在地图中，我显示了多个Marker并使用过的MarkerCluster.

到目前为止，我没有任何问题，并且可以轻松地从文档中实现。但现在我想显示InfoWindow标记是否被单击。

所以，我想到制作一个函数来获取点击事件并传递markerId，这样我就可以调用 API 并获取该标记的相关数据，然后以表格方式将其放入 infowindow 中。

现在，我面临的问题是：

1) 呼叫onToggleOpen来自onMarkerClick

2）如何在infowindow对象中设置数据onMarkerClick

我面临的所有这些问题都是因为我使用 HOC ie recompose。我习惯了类实现，但尝试过函数式实现，试图使其纯粹无状态。

参考链接： https: //tomchentw.github.io/react-google-maps/#infowindow

以下是我的代码：

import React, { Component } from "react";
import Header from "./Header.js";
import Sidebar from "./Sidebar.js";
import axios from "axios";
import imgmapcluster from "./pins/iconmapcluster.png";
import user from "./pins/user1copy.png";
import { compose, withProps, withHandlers } from "recompose";
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
  InfoWindow
} from …

我想添加一个 StandaloneSearchBox，但我无法添加它，这是我收到的问题，这是我正在使用的代码。

我按照文档示例中所示进行了操作，但无法使其正常工作，并且找不到工作示例。

我在 codesanbox 上发布的示例与我正在使用的代码相同。

链接：代码沙盒

代码：

import React, { useState, useRef, useCallback } from "react";
import {
  LoadScript,
  GoogleMap,
  DrawingManager,
  Polygon,
  Marker,
  OverlayView,
  StandaloneSearchBox
} from "@react-google-maps/api";
import Switch from "@material-ui/core/Switch";

import Paper from "@material-ui/core/Paper";
import MenuItem from "@material-ui/core/MenuItem";
import MenuList from "@material-ui/core/MenuList";

import "./styles.css";
const libraries = ["drawing"];

const options = {
  drawingControl: true,
  drawingControlOptions: {
    drawingModes: ["polygon"]
  },
  polygonOptions: {
    fillColor: `#2196F3`,
    strokeColor: `#2196F3`,
    fillOpacity: 0.5,
    strokeWeight: 2,
    clickable: true,
    editable: true,
    draggable: true,
    zIndex: …

我有我的地图组件

const MyMapComponent = withScriptjs(\n  withGoogleMap(props => (\n    <GoogleMap\n      defaultZoom={8}\n      defaultCenter={{ lat: props.lat, lng: props.lng }}\n      onClick={e => console.log(e)}\n    >\n      {props.isMarkerShown && (\n        <Marker position={{ lat: props.lat, lng: props.lng }} />\n      )}\n      <MarkerClusterer averageCenter enableRetinaIcons gridSize={60}>\n        {props.markers.map(marker => (\n          <CustomMarker\n            key={marker.id}\n            marker={marker}\n\n          />\n        ))}\n      </MarkerClusterer>\n    </GoogleMap>\n  ))\n);\nexport default MyMapComponent;\n

我的应用程序组件返回此代码

  return (\n      <div className="container">\n        <div className="map">\n// myMapComponent imported as Map\n          <Map\n            onMapClick={this.onMapClick}\n\n            googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&key=YOUR_API_KEY"\n            loadingElement={<div style={{ height: `100%` }} />}\n            containerElement={<div style={{ height: `95vh` }} />}\n            mapElement={<div style={{ …

我在地图上没有看到缩放 +/-、地图/卫星和人类图标。我正在按照文档中指定的步骤进行操作。有没有我必须通过的特定道具？或者有什么悬而未决的问题？谢谢你的帮助。

这是我的 GoogleMap 组件的片段 -

*

withScriptjs(
      withGoogleMap(() => {
       return (<GoogleMap
          // google={google}
          defaultZoom={8}
          center={selectedAirportPos}
          // center={{lat: 39.996944444444445, lng: -82.89194444444445 }}
          // defaultCenter={{ lat: -34.397, lng: 150.644 }}
           defaultOptions={{
            // defaultCenter: {lat: -34.397, lng: 150.644 },
            disableDefaultUI: true,
            mapTypeId: 'terrain',//google.maps.MapTypeId.TERRAIN,
          }}
        >
           <GMapsAirportMarker
             withInfoWindow={allMarkersState[selectedAirport.id]}
             withInfoWindowContent={this.selectedInfoWindowContent(selectedAirport)}
             position={selectedAirportPos}
             icon

*

我使用react-google-maps库，当我通过函数getBounds获取边界时。我得到的物体看起来像这样

_.Kc {f: Jc, b: Fc}
 b:Fc {b: -69.44550556640627, f: -69.37409443359377}
 f:Jc {b: 5.843139027557267, f: 5.958055017316458}
 __proto__:Object

我需要左下边界（纬度，经度）和右上边界（纬度，经度）。你能告诉我数字 b 和 f 是多少吗？哪一个是左下边界纬度、左下边界经纬度、右上边界纬度、右上边界经纬度。我找不到任何文档

我正在使用react-google-maps包在我的反应应用程序中呈现 Google 地图。我想禁用街景。

从文档中，我看到有以下道具：

• 默认街景

• 街景

我曾尝试将两者与 false 一起使用 - 但都不起作用。有谁知道如何通过这个包禁用街景功能？

代码片段在这里：

import React, { Component } from 'react';
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps";
import PropTypes from 'prop-types';

const Map = withScriptjs(withGoogleMap((props) => {
    return(
        <GoogleMap 
            defaultZoom={17}
            defaultCenter={{ lat: props.lat, lng: props.lng }}
            // defaultStreetView={false}
            // streetView={false}
        >
            {props.isMarkerShown && <Marker position={{ lat: props.lat, lng: props.lng }} />}
        </GoogleMap>
    )
}))

Map.propTypes = {
    lat: PropTypes.number.isRequired,
    lng: PropTypes.number.isRequired,
    isMarkerShown: PropTypes.bool.isRequired
}

export …