标签: react-google-maps

因为我想在React中创建从当前位置到特定点击标记的Route.为了实现这个我使用React谷歌地图库(react-google-maps)和它的方向示例(方向示例)但不幸的是我无法new google.maps.DirectionsService()在React组件中调用方法.它给了我错误,因为谷歌是未定义的.对于相同的场景已经存在未解决的问题(谷歌是未定义的)

我有一个使用https://github.com/tomchentw/react-google-maps的非常简单的react应用程序，但是我很难理解如何获取对当前地图的引用或如何访问google.maps.Map自定义组件中的对象。

我在存储库中找到了这个，但是看完这些帖子后，我仍然有些困惑。

我正在从DirectionsRenderer示例开始构建我的应用程序。

接下来，我要添加自己的自定义组件，以选择起点并使用Google Maps自动填充API。

是的，我知道该软件包已经包含用于此的组件，但我需要做的不只是在地图上搜索位置。

为了满足我的需求，我会做类似的事情

const autocomplete = new google.maps.places.Autocomplete(node);
autocomplete.bindTo('bounds', map);

node我绑定自动完成功能的元素在哪里，并且map是google.maps.Map对象的实例。

到目前为止，我的申请：

App.jsx

const App = ({ store }) => (
  <Provider store={store}>
    <div>
      <Sidebar>
        <StartingPoint defaultText="Choose starting point&hellip;" />
      </Sidebar>
      <GoogleApiWrapper />
    </div>
  </Provider>
);

GoogleApiWrapper

const GoogleMapHOC = compose(
  withProps({
    googleMapURL: 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=__GAPI_KEY',
    loadingElement: <div style={{ height: '100vw' }} />,
    containerElement: <div style={{ height: '100vh' }} />,
    mapElement: <div style={{ height: '100%' …

我想更改带有自定义图像的google map群集。但是，它不会改变我提供的任何内容。这个initMap函数是

https://developers.google.com/maps/documentation/javascript/marker-clustering

我试图用一些来自Google的随机图像来更改群集图像。但是，它不呈现任何内容。

群集不支持自定义群集映像

function initMap() {

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: {lat: -28.024, lng: 140.887}
        });

        // Create an array of alphabetical characters used to label the markers.
        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

        // Add some markers to the map.
        // Note: The code uses the JavaScript Array.prototype.map() method to
        // create an array of markers based on a given "locations" array.
        // The map() method here has nothing to do with the Google Maps …

我在react应用程序中使用react-google-maps以及location-autocomplete.

在页面加载时,我收到了臭名昭着的:

"您已在此页面上多次添加Google Maps API.这可能会导致意外错误."

重复一遍,我通过模块使用地图,而不是直接包含<script>标签.克服此类案件的最佳方法是什么？

我在github上发现了这个问题,这似乎是相同的情况,有不同的库,但是他们对于他们的库('leaflet')的具体细节太深入了.我想知道是否有更通用的解决方案.

我正在使用react-google-maps显示带有标记的地图,当您点击标记时,所有信息窗口都会打开.我想点击它时只显示一个标记的信息窗口,而其他标记的信息窗口保持关闭状态.

这是我的代码:

    <GoogleMap
        defaultZoom={15}
        defaultCenter={{ lat: 51.508530, lng: -0.076132 }}
    >
        {props.places && props.places.map((place, i) =>
            <Marker onClick={props.onToggleOpen} key={i} position={{ lat: place.geometry.location.lat(), lng: place.geometry.location.lng() }} >
                {props.isOpen && <InfoWindow onCloseClick={props.onToggleOpen}>
                  <div>{place.name}</div>
                </InfoWindow>}
            </Marker>
        )}
    </GoogleMap>

我正在打开和关闭InfoWindow

import { compose, withProps, withStateHandlers, withHandlers, withState } from "recompose";

...

withStateHandlers(() => ({
  isOpen: false,
}), {
  onToggleOpen: ({ isOpen, id }) => () => ({
    isOpen: !isOpen,
  })
}),

我正在映射所有标记,并在地图上显示它们.我怎么能单击打开一个标记InfoWindow？ 这是一个相关的问题,但它不是用React制作的,也没有使用react-google-maps.

我在我的反应程序中使用google-maps-react 。
有没有什么方法可以在绘制的标记之间绘制折线
任何内置方法来在标记之间绘制线条

我正在努力寻找一个非常简单的例子,说明当用户使用基于组件的React-google-maps点击地图时,如何向Google地图添加标记.需要帮忙.

const Map = withScriptjs(withGoogleMap((props) =>
  <GoogleMap
    defaultZoom={8}
    defaultCenter={{ lat: -34.397, lng: 150.644 }}
    onClick = {props.onMapClick}
   >
  {props.isMarkerShown && <Marker position={props.markerPosition} />}

 </GoogleMap>
))

export default class MapContainer extends React.Component {
  constructor (props) {
    super(props)
    this.state = {

   }
 }

render () {
  return (
  <div style={{height: '100%'}}>
    <Map
      googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places"
      loadingElement={<div style={{ height: `100%` }} />}
      containerElement={<div style={{ height: `400px` }} />}
      mapElement={<div style={{ height: `100%` }} />}
      placeMarker={this.placeMarker}
    />
  </div>
)
 }
 }

我让地图在加载时工作，但每当我传递道具时，地图本身永远不会改变。

标记发生变化，但始终落后于它应有的状态，这显然是一个同步问题，但我不确定如何在我的组件中解决此问题。

class Map extends React.Component {
  state = {
     center: { lat: 50.937531, lng: 6.960278600000038 }
  }

  componentWillReceiveProps = () => {
    this.setState({
      center: { 
        lat: Number(parseFloat(this.props.city.lat)),
        lng: Number(parseFloat(this.props.city.lng))
      }
    });
  }

  render() {
    console.log(this.state.center)
    return (
      <div>
        <MapDetails
          googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyB-L-IikkM6BZ_3Z2QIzbkx4pdAkP76tok&v=3.exp&libraries=geometry,drawing,places"
          loadingElement={<div style={{ height: `100%` }} />}
          containerElement={<div style={{ height: `100vh`}} />}
          mapElement={<div style={{ height: `100%` }} />}
          mapCenter={this.state.center}
        />
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return { city: state.CityNameReducer }
}

export default connect(mapStateToProps)(Map);

const …

在使用 ReactJS 获取她的坐标后，我正在使用react-google-maps来显示用户的位置。但是，当我从原始位置移动标记时，初始标记停留在那里，因此创建了两个标记。我不知道如何解决这个问题。

我希望无论发生什么，地图标记都保持在中心，而且当用户拖动或放大/缩小标记时，标记保持在中心，以便用户的位置始终位于地图的中心。通过这种方式，用户将能够更新她的位置。根据您的示例，当我拖动时，标记保持固定在其位置此组件的设计使用户可以设置她的位置，只需稍微调整标记的位置，以防标记有点偏离任何帮助将不胜感激：

应用程序.js

import React from "react";
import WrappedMap from "./Map";
import "./styles.css";

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      location: "",
      place: ""
    };
  }

  handleLocation = (location) => {
    this.setState({ location: location });
  };

  handlePlace = (place) => {
    this.setState({ place: place });
  };

  render() {
    return (
      <div className="App">
        <WrappedMap
          googleMapURL={`https://maps.googleapis.com/maps/api/js?key=`}
          loadingElement={<div style={{ height: `100%` }} />}
          containerElement={
            <div
              style={{
                height: `50%`,
                width: "95%",
                position: "absolute",
                marginTop: …

我想在react-google-maps 中获取地图的当前缩放级别，就像我们使用 getZoom() 函数在简单的谷歌地图 API 中所做的那样。如何在react-google-maps中做到这一点？

我看过很少的答案，但没有一个对我有用。

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


const Map = () => {
  return (
    <GoogleMap
      defaultZoom={15}
      defaultCenter={{ lat: lat, lng: lng }}
    >
      <Marker position={{ lat: lat, lng: lng }} />
    </GoogleMap>
  )
}

const WrappedMap = withScriptjs(withGoogleMap(Map))

const Index = () => {
  return (
    <Layout>
      <WrappedMap
        googleMapURL={`https://maps.googleapis.com/maps/api/js? 
        key=my_key&v=3.exp&libraries=geometry,drawing,places`}
        loadingElement={<Loading />}
        containerElement={<div style={{ height: `400px` }} />}
        mapElement={<div style={{ height: `100%` }} />}
      />
    </Layout> …