如何解决标记组件未显示在 React JS 中的 Google 地图上
我对 React JS 比较陌生。但是,我似乎无法弄清楚为什么标记没有显示在我的 GoogleMap 组件上。
const MyMapComponent = withGoogleMap((props) => {
return (
<GoogleMap
defaultZoom={8}
defaultCenter={{lat: 43.856,lng: 18.413}}
>
{
tasks.map(task => {
let trackers = task.userTrackers;
console.log(trackers);
trackers.map(tracker => (
<Marker
//key={tracker.id}
position={{
lat: tracker.locationLatitude,lng: tracker.locationLongitutde
}}
icon={{url: yellowMarkerURL}}
>
</Marker>
))
})
}
</GoogleMap>
)
}
);
"tasks" 是我从数据库中获取的一个数组,它包含一个数组 "userTrackers"。我在这段代码中使用的 console.log 命令写出了我期望的所有内容(不要担心经度处的拼写错误,数据库中就是这样)。我觉得map方法不行或者她内心的东西,但我似乎想不通。
解决方法
在您的 {}
中使用花括号 <Marker>
和 tasks.map(task => {...}
组件似乎存在问题。它甚至不显示任何错误。这似乎是图书馆本身的问题。一种解决方法是使用 ()
并在外部声明任何其他内容。例如:
链接:https://stackblitz.com/edit/sample-simple-map-withjsonfile-g1lpuy
import React,{ Component } from "react";
import { withGoogleMap,GoogleMap,Marker } from "react-google-maps";
import data from "./data.json";
function Map() {
const GoogleMapExample = withGoogleMap(props => (
<GoogleMap
defaultCenter={{ lat: 40.756795,lng: -73.954298 }}
defaultZoom={13}
>
{data.map((location,i) => (
//if this is contained with {},markers won't show up
<Marker
key={i + 1}
position={{ lat: location.lat,lng: location.lng }}
/>
))}
</GoogleMap>
));
return (
<div>
<GoogleMapExample
containerElement={<div style={{ height: `500px`,width: "500px" }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
</div>
);
}
export default Map;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。