Связывание JSON-файла с google-map-реакции для отображения маркера на карте - PullRequest
Новая
       38

Связывание JSON-файла с google-map-реакции для отображения маркера на карте

0 голосов
/ 15 февраля 2019

Я пытаюсь связать свой файл JSON с google-map-реакции.Однако мои JSON-координаты не имеют формат «lat» и «lng», а просто [123.231, 39.234].Я пытался использовать

const data = [{lat: location [0], lng: location [1]}]

Но это не работает: /

Это мой файл JSON 

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

И это JSON, который использовался с google-map-реаги 

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

Вот мой код для Map 

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;

1 Ответ

0 голосов
/ 20 февраля 2019

Учитывая предоставленный формат данных: 

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>
    );
})}

Демо

...