将JSON文件链接到google-map-react以在地图上显示标记

Question

{
"_id" : ObjectId("5c3a42605a498f045d2e7a81"),
"name" : "asdfsadf",
"description" : "asdfasdf",
"location" : [ 
    37.556547032646, 
    37.556547032646
],
"state" : "Seoul",
}

[
  {
    "id": 123,
    "title": "Think Company",
    "address": [
      {
        "id": 1236,
        "city": "Helsinki",
        "lat": "60.190711",
        "lng": "24.907195"
      }
    ]
  },
]

import React, { Component } from "react";
import GoogleMapReact from "google-map-react";
import pin from "./g.png";

const markerStyle = {
  position: "absolute",
  width: "25px",
  height: "30px",
  top: "100%",
  left: "100%",
  transform: "translate(-50%, -100%)"
};
const data = [{ lat: location[0], lng: location[1] }];

export class Map extends Component {
  static defaultProps = {
    center: {
      lat: 37.5665,
      lng: 126.978
    },
    zoom: 10
  };

  render() {
    return (
      <div style={{ height: "100vh", width: "80%" }}>
        <GoogleMapReact
           bootstrapURLKeys={{
            key: ""
          }}
          defaultCenter={this.props.center}
          defaultZoom={this.props.zoom}
        >
          {this.props.locations.map(item => {
            if (item.address.length !== 0) {
              return item.address.map(i => {
                return (
                  <div key={i.id} lat={i.lat} lng={i.lng}>
                    <img style={markerStyle} src={pin} alt="pin" />
                  </div>
                 );
              });
            }
          })}
        </GoogleMapReact>
      </div>
    );
   }
}

export default Map;

Answer 1

根据提供的数据格式：

const data = [
  {
    _id: ObjectId("5c3a42605a498f045d2e7a81"),
    name: "asdfsadf",
    description: "asdfasdf",
    location: [37.556547032646, 37.556547032646],
    state: "Seoul"
  },
  ///...
]

标记可以像这样呈现

{data.map(item => {
    return (
      <div lat={item.location[0]} lng={item.location[1]}>
        <img style={markerStyle} src={pin} alt="pin" />
      </div>
    );
})} 

演示