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

Question

我正在尝试 link 我的 JSON 文件到 google-map-react。但是，我的 JSON 坐标没有 "lat" 和 "lng" 格式，只有 [123.231, 39.234]。我试过使用

const 数据 = [{ lat: 位置[0], lng: 位置[1] }]

但是，它不起作用:/

这是我的 JSON 文件

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

而且，这是与 google-map-react

一起使用的 JSON

[
  {
    "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>
    );
})}

Demo

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

Linking JSON File to google-map-react to show marker on map

google-maps

reactjs

google-map-react