Question

我需要用反应创建地图，现在我有多个不同海拔高度的物体。但我不知道如何在单页上为每个对象绘制多个地图。谁能告诉我怎么做？一个简短的例子将是一个很大的优势

Answer 1

您应该通读React docs on lists。渲染时需要对对象进行映射/迭代。

class Application extends React.Component {
  render() {
    const mapData = [{a: 123,},{a:345}]; //Your map data
    return <div>
      {mapData.map((data)=>{
        ///Render your maps
        return <div>{data.a}</div>
      })}
    </div>;
  }
}

https://codepen.io/anon/pen/XRRzxy

Answer 2

这是一个很棒的组件built for React

样本用法

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';

const AnyReactComponent = ({ text }) => <div>{text}</div>;

class SimpleMap extends Component {
  static defaultProps = {
    center: {lat: 59.95, lng: 30.33},
    zoom: 11
  };

  render() {
    return (
      <GoogleMapReact
        defaultCenter={this.props.center}
        defaultZoom={this.props.zoom}
      >
        <AnyReactComponent
          lat={59.955413}
          lng={30.337844}
          text={'Kreyser Avrora'}
        />
      </GoogleMapReact>
    );
  }
}

如何使用反应来绘制地图

2 个答案: