jimu-mobile/example/components/map.js

积木组件库助力移动端开发

import React from 'react'
import JIMU from '../../src/index'
const {TcMap} = JIMU,
  {PathMap,LinePath,CircleMap} = TcMap
// 地图路径绘制 pathmap
const _Map = React.createClass({
  getInitialState() {
    return {
      type : "line"
    }
  },
  handleClick(n) {
    let type = this.state
    if (type != n) {
      this.setState({
        type: n
      })
    }
  },
  render() {
    return (
      <div>
        <div className="libs-intr">
          <h2><span className="icon-earth"></span> 地图 (PathMap)</h2>
          <div className="demo-show">
            <h3 className="demo-title">demo展示</h3>
            <div className="map-nav">
              <li className={this.state.type == "line" ? "current" : "" } onClick={this.handleClick.bind(this,"line")}>路线绘制</li>
              <li className={this.state.type == "path" ? "current" : "" } onClick={this.handleClick.bind(this,"path")}>路径绘制</li>
              <li className={this.state.type == "circle" ? "current" : "" } onClick={this.handleClick.bind(this,"circle")}>圆形覆盖</li>
            </div>
            <div className="map-layout-dom">
              {this.state.type == "line" && <LinePath />}
              {this.state.type == "path" && <PathMap />}
              {this.state.type == "circle" && <CircleMap />}
            </div>
          </div>
        </div>
      </div>
    )
  }
})
module.exports = _Map