标记不适用于 google-map-react
Markers not working with google-map-react
我正在使用 'google-map-react' 库,我已经尝试了所有方法,但标记没有出现。
我以多种方式将坐标传递给标记,但 none 有效。
这是我的代码和存储库:
https://github.com/jorginyu/ubica
import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
const API_KEY = 'WTFULOOKINAT';
const contacts = [
{ name: 'Spiderman', lat: 41.529616, lng: 2.434130 },
{ name: 'Iron Man', lat: 41.528103, lng: 2.433834 },
{ name: 'Hulk', lat: 41.530192, lng: 2.422994 }
];
const MarkersC = (text ) => <div className="contact">{text}</div>;
export default class MapComponent extends Component {
constructor(props) {
super(props);
this.state = {
center: {
lat: 41.528452,
lng: 2.434195
},
zoom: 18
}
}
render() {
return (
// Important! Always set the container height explicitly
<div className="mt-5" style={{ height: '80vh', width: '100%' }}>
<GoogleMapReact
bootstrapURLKeys={{ key: API_KEY }}
defaultCenter={this.state.center}
defaultZoom={this.state.zoom}
>
{contacts.map((contact,i) => {
<MarkersC position={{lat: contact.lat, lng: contact.lng}} text={contact.name} key={i} />
})}
</GoogleMapReact>
</div>
);
}
}
我能做什么?感谢您的宝贵时间:)
如果您打开浏览器的控制台,您将看到一个错误。问题在于您的 MarkerC
组件以及您如何 尝试 获取 text
道具。
组件的参数是一个对象,具有传递给它的所有属性。
您不需要解构它来获得 text
您只需使用整个参数并尝试显示它。
所以你需要将它适当地解构为const MarkersC = ( {text} ) => ..
而不是
const MarkersC = ( text ) => <div className="contact">{text}</div>;
应该是
const MarkersC = ( {text} ) => <div className="contact">{text}</div>;
更新
刚注意到,google-map-react
期望在标记上找到 lat
和 lng
属性。您已将它们包裹在 position
属性 中,因此无法找到它们。
所以你的用法应该是
任一
<MarkersC lat={contact.lat} lng={contact.lng} text={contact.name} key={i} />
或展开包含这些属性的整个 contact
对象
<MarkersC {...contact} key={i} />
因此 lat
、lng
和 text
都是 MarkersC
组件的直接属性。
存在格式问题。我删除了空格:
然后:
{
contacts.map((contact, i) =>
<MarkersC lat={contact.lat} lng={contact.lng} text={contact.name} key={i} />
)
}
现在:
{
contacts.map((contact, i) => <MarkersC lat={contact.lat} lng={contact.lng} text={contact.name} key={i} /> )
}
在您的问题中,您提供了无效的 GoogleMap 密钥,因此它在控制台中显示错误 Google Maps JavaScript API error: InvalidKeyMapError
。
因此请提供有效的 GoogleMap 密钥或空白 (const API_KEY = ''),仅供开发使用。
在我使用空白 API_KEY 的情况下,它工作正常。
(您的 git 回购代码与您在 Whosebug 中发布的代码不同。)
在初始 'const' 上声明对象类型并直接引用 'text' 的值对我有用:
const AnyReactComponent = (text:any) => <div>{text.text}</div>;
我正在使用 'google-map-react' 库,我已经尝试了所有方法,但标记没有出现。 我以多种方式将坐标传递给标记,但 none 有效。 这是我的代码和存储库:
https://github.com/jorginyu/ubica
import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
const API_KEY = 'WTFULOOKINAT';
const contacts = [
{ name: 'Spiderman', lat: 41.529616, lng: 2.434130 },
{ name: 'Iron Man', lat: 41.528103, lng: 2.433834 },
{ name: 'Hulk', lat: 41.530192, lng: 2.422994 }
];
const MarkersC = (text ) => <div className="contact">{text}</div>;
export default class MapComponent extends Component {
constructor(props) {
super(props);
this.state = {
center: {
lat: 41.528452,
lng: 2.434195
},
zoom: 18
}
}
render() {
return (
// Important! Always set the container height explicitly
<div className="mt-5" style={{ height: '80vh', width: '100%' }}>
<GoogleMapReact
bootstrapURLKeys={{ key: API_KEY }}
defaultCenter={this.state.center}
defaultZoom={this.state.zoom}
>
{contacts.map((contact,i) => {
<MarkersC position={{lat: contact.lat, lng: contact.lng}} text={contact.name} key={i} />
})}
</GoogleMapReact>
</div>
);
}
}
我能做什么?感谢您的宝贵时间:)
如果您打开浏览器的控制台,您将看到一个错误。问题在于您的 MarkerC
组件以及您如何 尝试 获取 text
道具。
组件的参数是一个对象,具有传递给它的所有属性。
您不需要解构它来获得 text
您只需使用整个参数并尝试显示它。
所以你需要将它适当地解构为const MarkersC = ( {text} ) => ..
而不是
const MarkersC = ( text ) => <div className="contact">{text}</div>;
应该是
const MarkersC = ( {text} ) => <div className="contact">{text}</div>;
更新
刚注意到,google-map-react
期望在标记上找到 lat
和 lng
属性。您已将它们包裹在 position
属性 中,因此无法找到它们。
所以你的用法应该是
任一
<MarkersC lat={contact.lat} lng={contact.lng} text={contact.name} key={i} />
或展开包含这些属性的整个 contact
对象
<MarkersC {...contact} key={i} />
因此 lat
、lng
和 text
都是 MarkersC
组件的直接属性。
存在格式问题。我删除了空格:
然后:
{
contacts.map((contact, i) =>
<MarkersC lat={contact.lat} lng={contact.lng} text={contact.name} key={i} />
)
}
现在:
{
contacts.map((contact, i) => <MarkersC lat={contact.lat} lng={contact.lng} text={contact.name} key={i} /> )
}
在您的问题中,您提供了无效的 GoogleMap 密钥,因此它在控制台中显示错误 Google Maps JavaScript API error: InvalidKeyMapError
。
因此请提供有效的 GoogleMap 密钥或空白 (const API_KEY = ''),仅供开发使用。
在我使用空白 API_KEY 的情况下,它工作正常。
(您的 git 回购代码与您在 Whosebug 中发布的代码不同。)
在初始 'const' 上声明对象类型并直接引用 'text' 的值对我有用:
const AnyReactComponent = (text:any) => <div>{text.text}</div>;