我正在尝试渲染从父组件传递的特定位置的映射.我正在使用google-maps-react,我不确定两件事:
如何onClick在渲染中调用函数.以及如何在我的类中编写函数来呈现我想要的组件.到目前为止这是:
import React, { Component } from 'react';
import yelp from 'yelp-fusion';
import xhr from 'xhr';
import GoogleMapContainer from './Map';
class BusinessCard extends Component {
constructor () {
super()
this.renderMap = this.renderMap.bind(this);
}
renderMap(){
<GoogleMapContainer barLat={bar.coordinates.latitude} barLong={bar.coordinates.longitude} />
}
render() {
const newCard = this.props.newCard
const bar = this.props.selectedBar
// console.log("this are the coordinates", bar["coordinates"])
if(bar.coordinates){
return (
<div>
<p>{bar.coordinates.longitude}</p>
<p>{bar.name}</p>
<img src={bar.image_url} />
<button> X </button>
<button onClick={newCard}> Yes </button>
</div>
)
} else {
return( …我正在尝试找出在拖动标记时如何检索标记位置的方法。我发现了这一点：拖动标记事件与提供纬度/经度的回调一起？
并在我的应用中实现，如下所示：
export class MapContainer extends React.Component {
onMarkerDragEnd = evt => {
console.log(evt);
};
render() {
const style = {
width: "100%",
height: "300px"
};
let lat = this.props.lat;
let lng = this.props.lng;
return (
<Map
google={this.props.google}
style={style}
initialCenter={{
lat: lat,
lng: lng
}}
zoom={14}
>
<Marker
onClick={this.onMarkerClick}
draggable={true}
onDragend={this.onMarkerDragEnd}
name={"Current location"}
/>
</Map>
);
}
}
onMarkerDragEnd函数记录一个evt对象，如下所示：
{onClick: undefined, draggable: true, onDragend: ƒ, name:
"Currentlocation", map: Zf, …}
draggable: true
google:{maps: {…}}
map: Zf {gm_bindings_: {…}, __gm: …当我在 ReactJS 中使用 Google 地图时，我发现了两个不同的 npm，例如 google-map-react和google-maps-react。由于我是反应初学者，我有点困惑该使用什么（更喜欢）。虽然我找到了这个链接，但它有点不同，它是关于- google-map-react和react-google-maps之间的差异
import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
const AnyReactComponent = ({ text }) => <div>{text}</div>;
class SimpleMap extends Component {
static defaultProps = {
center: {
lat: 59.95,
lng: 30.33
},
zoom: 11
};
render() {
return (
// Important! Always set the container height explicitly
<div style={{ height: '100vh', width: '100%' }}>
<GoogleMapReact
bootstrapURLKeys={{ key: /* YOUR …我正在使用 Google ReactJS 库将地图添加到我的 React Web 应用程序中。@googlemaps/react-wrapper
我想知道是否有人使用这个包装器实现了地点自动完成？根据我过去使用地点的经验，实施方式是通过对 apis.google.com 的地图脚本请求来加载地点。
从我一直在尝试做的事情来看，这个反应包装库似乎没有太多文档或灵活性。
提前致谢
当我想从@react-google-maps/api实现 MarkerClusterer 时，出现错误。
我得到的错误是
没有重载与此调用匹配。重载第 1 个（共 2 个）“（props：MarkerClustererProps | Readonly）：ClustererComponent”出现以下错误。类型“Element[]”缺少类型“ReactElement<any,any>”中的以下属性：类型、道具、键重载 2 个，共 2 个，“(props: MarkerClustererProps，上下文：any)：ClustererComponent”，出现以下错误。类型“Element[]”不可分配给类型“Element”.ts(2769) index.d.ts(378, 15)：预期类型来自此签名的返回类型。index.d.ts(378, 15)：预期类型来自此签名的返回类型。
您可以检查下面的代码。（我只分享整个代码的相关部分）
import React, { useEffect, useState, useRef } from 'react';
import { GoogleMap, useJsApiLoader, Marker, MARKER_LAYER, OverlayView, MarkerClusterer } from '@react-google-maps/api';
import './app.css';
import PlacesAutocomplete from './components/PlacesAutocomplete';
const containerStyle = {
width: '100vw',
height: '100vh',
};
const App = () => {
const [center, setCenter] = useState({ lat: 39.015137, lng: 34.97953 });
const [zoom, setZoom] = useState(6);
const [markers, setMarkers] …google-maps google-maps-api-3 google-maps-markers markerclusterer google-maps-react
当我尝试使用 Google Maps 加载组件时（props 已按预期传递给组件），我只是收到一条消息，说"Loading map..."但未加载带有标记的地图。控制台中也没有错误。这是组件。我在这里做错了什么？
import React, {Component} from 'react';
import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';
import { Constants } from './../../utils/constants';
export class MapContainer extends Component {
state = {
selectedPlace: ''
}
onMarkerClick = (e) => {
this.setState({selectedPlace: e.Name});
}
render() {
return (
<Map
google={this.props.google}
style={{width: '20vw', height: '45vh', 'top': '1.5rem'}}
containerStyle={{width: '20vw', height: '30vh'}}
initialCenter={{
lat: this.props.lat,
lng: this.props.lng
}}
zoom={15}>
{this.props.markers.length > 0 && // Rendering multiple markers for
this.props.markers.map((m) => …我有一个地图组件，其中我使用Google-map-react库来显示谷歌地图中的位置。在该地图内，我有一个名为“在地图中查看”的按钮。所以，现在，如果用户单击该按钮。它应该将他们带到具有给定位置坐标的谷歌地图。请找到下面的代码并告诉我，我怎样才能实现这一目标
import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import styles from '../../../../../../assets/css/Me.style.js';
import GoogleMapReact from 'google-map-react';
import { Typography, Button } from '@material-ui/core';
import Marker from '@material-ui/icons/LocationOnOutlined'
class DetailsMap extends Component {
static defaultProps = {
center: { lat: 40.7446790, lng: -73.9485420 },
};
render() {
const {classes} = this.props;
return (
<div className={classes.root}>
<div className={classes.googleMap}>
<GoogleMapReact
zoom = {11}
onClick={this.onClick}
defaultCenter={ this.props.center }
>
<Marker
style={{color: '#ff7777'}}
lat={40.7473310}
lng={-73.8517440}
/>
<div …我在我的项目中使用 google-maps-react。
现在我需要在地图中集成地方 api。
但似乎存在一些加载顺序问题，因此我收到以下错误。
错误：[react-places-autocomplete]：必须加载 Google Maps JavaScript API 库。请参阅：https : //github.com/kenny-hibino/react-places-autocomplete#load-google-library
如果我删除了地点组件，地图工作正常。
我需要两个组件一起工作。
关于如何解决这个问题的任何想法？
我正在展示一个带有有效密钥的Google Maps React的基本示例，但并没有向我展示该地图，而是向我显示了一条文字，内容为“正在加载地图...”。
import {GoogleApiWrapper, Map, MapProps} from 'google-maps-react';
import * as React from 'react'
export class MapContainer extends React.Component<MapProps> {
public render() {
return (
<Map
google={this.props.google}
centerAroundCurrentLocation={true}
zoom={20}
/>
);
}
}
export default GoogleApiWrapper({
apiKey: (API_KEY)
})(MapContainer)
控制台日志中没有任何错误。