我需要为地图中的每个标记创建一个信息窗口。我可以在地图上看到标记，但是当我在标记上单击以获取InfoWindow时，出现此错误TypeError: Cannot read property 'isOpen' of undefined，请this.setState({isOpen: !this.state.isOpen})在中进行引用onToggleOpen。
代表谢谢
componentWillMount() {
this.setState({ markers: [], isOpen: false })
}
componentDidMount() {
let list = { restaurants : []}
database.ref('..').on('value', .. => {
...
})
this.setState({ markers: list.restaurants});
})
}
onToggleOpen(){
this.setState({isOpen: !this.state.isOpen})
}
render() {
const MapWithAMarker = compose(
withProps({
googleMapURL: ...,
loadingElement: ...,
containerElement: ...,
mapElement: ...
}),
withScriptjs,
withGoogleMap
)(props =>
<GoogleMap
defaultZoom={17}
defaultCenter={{ lat: ..., lng: ... }}
>
{props.markers.map(marker => ( …我是React的新手.我正在尝试使用google-map-react在Google地图上显示几个位置.
我正在使用以下来源.
import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
const AnyReactComponent = ({ text }) => <div>{text}</div>;
class GMap extends Component {
static defaultProps = {
center: {
lat: 15.95,
lng: 79.33
},
zoom: 7
};
componentWillMount() {
var locations = [
{lat: 16.16, lng: 80.80, name:'XYZ'},
{lat: 14.14, lng: 77.77, name:'ABC'},
{lat: 13.13, lng: 79.79, name:'CYZ'},
{lat: 13.31, lng: 79.97, name:'EWWE'}];
this.setState({loc:locations});
}
render() {
return (
// Important! Always set the container height explicitly …我正在尝试将多边形实现到react-google-maps插件中，但它不起作用。它没有错误，但我在地图上看不到任何多边形。
我可以在页面上看到地图，也出现标记。但我现在看不到任何多边形。
我在下面分享我的代码，任何帮助将不胜感激。
const coords = [
{lat: 29.047487,lng: 41.023164},
{lat: 29.0459633,lng: 41.0212904},
{lat: 29.0449333,lng: 41.0167573},
{lat: 29.0393543,lng: 41.0106695},
{lat: 29.032917,lng: 41.0049697},
{lat: 29.0226173,lng: 41.0061356},
{lat: 29.0078545,lng: 41.0039334},
{lat: 29.0201283,lng: 40.9765933},
{lat: 29.0319729,lng: 40.9657708},
{lat: 29.0784073,lng: 40.9536501},
{lat: 29.0944576,lng: 40.9493068},
{lat: 29.0975475,lng: 40.9514461},
{lat: 29.1052294,lng: 40.9647986},
{lat: 29.097338,lng: 40.978242},
{lat: 29.0931273,lng: 40.9835914},
{lat: 29.0858746,lng: 40.987738},
{lat: 29.056509,lng: 40.998902},
{lat: 29.061456,lng: 41.008443},
{lat: 29.0617561,lng: 41.0104752},
{lat: 29.0595245,lng: 41.0126772},
{lat: 29.052014,lng: 41.018198},
{lat: 29.047487,lng: 41.023164}];
const MyMapComponent = compose(
withProps({
googleMapURL: "https://maps.googleapis.com/maps/api/js?key=MY_API_KEY_IS_HERE&v=3.exp&libraries=geometry,drawing,places", …我正在开发一个使用react-google-maps( https://github.com/tomchentw/react-google-maps ) 库的项目。
它运行良好，但我们偶然发现了标记重叠的问题。我们案例的理想解决方案是使用这个插件：https : //github.com/jawj/OverlappingMarkerSpiderfier。
有什么方法可以使用它react-google-maps吗？
javascript google-maps reactjs markerspiderfier react-google-maps
鉴于以下数据：
[
{
"id": 1,
"name": "Park Slope",
"latitude": "40.6710729",
"longitude": "-73.9988001"
},
{
"id": 2,
"name": "Bushwick",
"latitude": "40.6942861",
"longitude": "-73.9389312"
},
{
"id": 3,
"name": "East New York",
"latitude": "40.6577799",
"longitude": "-73.9147716"
}
]
]
我正在通过react-google-maps创建标记，如下所示：
<Map
center={{ lat: 40.64, lng: -73.96 }}
zoom={12}
places={data}
googleMapURL="https://maps.googleapis.com/maps/api/js?key="
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `800px` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
哪里
class Map extends React.Component {
render() {
return (
<GoogleMap …当我点击地图图标并打开信息窗口时，页面会跳转到我的屏幕中央。打开信息窗口时如何防止页面跳转？
const UserMarker = props => (
<Marker
position={props.location}
icon={props.icon}
onClick={() => props.users.setIsOpen()}
>
{props.users.isOpen && <InfoWindow onCloseClick={() => props.users.setIsOpen()}>
<div>
<h3 className="margin-bottom-1">{props.users.hasDescription ? <img alt={props.users.name} src={props.icon} /> : <i className="fa fa-user" />} {props.users.name}</h3>
{props.users.hasDescription ? <p>{props.users.description}</p> : ''}
<p>{props.users.hasDescription ? '' : `Bid: ${props.users.bidAmount && convertToDollars(props.users.bidAmount)}`}</p>
</div>
</InfoWindow>}
</Marker>
)
export const UserMap = withScriptjs(withGoogleMap((props) => {
const { users, area, zoom } = props;
const markers = users.map((user, idx) => <UserMarker
key={idx}
users={user}
location={{ lat: user.lat, lng: user.lon …我想获取谷歌地图上绘制的多边形的所有坐标。这是我的代码
import React from "react";
import { compose, withProps } from "recompose";
import {
withScriptjs,
withGoogleMap,
GoogleMap,
Marker
} from "react-google-maps";
//import withScriptjs from "react-google-maps/lib/async/withScriptjs";
import { DrawingManager } from "react-google-maps/lib/components/drawing/DrawingManager";
const MyMapComponent = compose(
withProps({
/**
* Note: create and replace your own key in the Google console.
* https://console.developers.google.com/apis/dashboard
* The key "AIzaSyBkNaAGLEVq0YLQMi-PYEMabFeREadYe1Q" can be ONLY used in this sandbox (no forked).
*/
googleMapURL:
"https://maps.googleapis.com/maps/api/js?key=AIzaSyALpmb4KhFoR2Kcvty21gzzegprl4ilIgs&v=3.exp&libraries=geometry,drawing,places",
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `400px` }} …我正在尝试访问getPlaces()应该位于StandaloneSearchBox组件中的函数react-google-maps/api。在文档和其他示例中，我们以这种方式使用它：
function Map() {\n\n // does not work.\n // Error -> \'this\' implicitly has type \'any\' because it does not have a type \n // annotation.ts(2683)\n // index.tsx(22, 10): An outer value of \'this\' is shadowed by this container.\n const onPlacesChanged = () => console.log(this.searchBox.getPlaces());\n\n return (\n <LoadScript\n googleMapsApiKey="YOUR-API-KEY"\n libraries={places}\n >\n <GoogleMap\n mapContainerStyle={containerStyle}\n center={center}\n zoom={zoom}\n >\n { /* Child components, such as markers, info windows, etc. */}\n <>\n <StandaloneSearchBox onPlacesChanged={onPlacesChanged} >\n …我试图在点击时打开特定标记上的信息窗口,但是当我点击一个时,它会显示所有这些都打开了,并显示我这个错误:
React.Children.only expected to receive a single React element child.
这就是我的代码现在的样子:
import React, { Component } from 'react';
import { GoogleMap, Marker, withGoogleMap, withScriptjs, InfoWindow } from 'react-google-maps'
class Map extends Component {
state = {
isOpen: false
}
handleMarkerClick = () => {
this.setState({ isOpen: true})
}
render() {
return(
<div>
<GoogleMap
defaultZoom={13}
defaultCenter={{ lat: -22.9034778, lng: -43.1264636 }}
>{this.props.markers.map((marker, index) =>(
<Marker
key={index}
position={marker.location}
onClick={this.handleMarkerClick}
>{this.state.isOpen && <InfoWindow onCloseClick={this.handleMarkerClick}/>}
</Marker>
))}
</GoogleMap>
</div>
)
}
}
export default …