reactjs - 标记不适用于 google-map-react
问题描述
我正在使用“google-map-react”库,我已经尝试了所有方法,但标记没有出现。我以多种方式将坐标传递给标记,但没有一个起作用。这是我的代码和存储库:
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
组件的直接属性。
推荐阅读
- python - wget 不是内部或外部命令、可运行程序或批处理文件
- mongodb - MongoDB 触发器重新驱动
- swift - 使用工具栏向上移动工具栏
- python - 难以理解“分配前引用的局部变量”
- .net-core - 如何使用 brew 分发 .NET Core 控制台应用程序
- ruby-on-rails - 使用 rails generate 创建一个控制器会导致一个奇怪的错误
- c# - 从另一个 lambda 调用 Lambda 函数不起作用
- c# - 更改 WPF 中的按钮内容
- c - STM32 LCD-TFT闪烁
- hibernate - 如何在 Hibernate 中加入单独的表数据列