jimu-mobile/src/components/map/circlemap.js

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

const circleIconPic = require('../../styles/image/map_icon_circle.png')
const onIconPic = require('../../styles/image/icon_start_on.png')

import React, { Component,PropTypes } from 'react'
import ReactDOM from 'react-dom'
// 组件基于 qq地图 需先引用 //map.qq.com/api/js?v=2.exp

class CircleMap extends Component {
  constructor(props) {
    super(props)
    this.appendMap = this.appendMap.bind(this)
  }

  loadScript(jssrc) {
    //创建script标签
    var script = document.createElement("script")
    //设置标签的type属性
    script.type = "text/javascript"
    //设置标签的链接地址
    script.src = jssrc
    //添加标签到dom
    document.body.appendChild(script)
  }

  static propTypes = {
    clickable: React.PropTypes.bool,//圆形是否可点击。
    cursor: React.PropTypes.string,//鼠标在圆形内的光标样式。
    radius: React.PropTypes.number,//圆形的半径。
    fillColor: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.array
    ]),//圆形的边框颜色，可通过Color对象的alpha属性设置透明度。
    strokeDashStyle: React.PropTypes.string,//圆形的边框样式。实线是solid，虚线是dash。
    strokeColor :React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.array
    ]), //圆形的边框颜色，可通过Color对象的alpha属性设置透明度。
    strokeWeight: React.PropTypes.number,//圆形的边框线宽。
    visible: React.PropTypes.bool,//圆形是否可见。
    zIndex: React.PropTypes.number, //圆形的zIndex值。

    markerlat : React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number
    ]),
    markerlong : React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number
    ]),

    startlat : React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number
    ]),
    startlong : React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number
    ]),
    zoom : React.PropTypes.number
  }

  static defaultProps = {
    clickable: true,//圆形是否可点击。
    cursor: 'pointer',//鼠标在圆形内的光标样式。
    fillColor: [0,15,255, 0.2],//圆形的填充色，可通过Color对象的alpha属性设置透明度。
    radius: 500,//圆形的半径。
    strokeDashStyle: "solid",//圆形的边框样式。实线是solid，虚线是dash。
    strokeColor :[0,15,255, 0.3], //圆形的边框颜色，可通过Color对象的alpha属性设置透明度。
    strokeWeight: 1,//圆形的边框线宽。
    visible: true,//圆形是否可见。
    zIndex: 1000, //圆形的zIndex值。
    markerlat : "39.982163",
    markerlong : "116.806070",
    startlat : "39.985163",
    startlong : "116.804070",
    zoom : 14
  }

  componentDidMount() {
    window.appendMap = this.appendMap
    this.loadScript("//map.qq.com/api/js?v=2.exp&callback=appendMap")
  }

  isArray(object){
    return object && typeof object==='object' && Array == object.constructor
  }

  appendMap(){
    let mapRefs = this.refs.mapcontainer,
      {clickable,cursor,fillColor,radius,strokeDashStyle,strokeColor,strokeWeight,visible,zIndex,markerlat,markerlong,startlat,startlong,zoom} = this.props

    let fillColorKey = this.isArray(fillColor) ? new qq.maps.Color(fillColor[0],fillColor[1],fillColor[2],fillColor[3]) : fillColor,
      strokeColorKey = this.isArray(strokeColor) ? new qq.maps.Color(strokeColor[0],strokeColor[1],strokeColor[2],strokeColor[3]) : strokeColor

    let center = new qq.maps.LatLng(markerlat,markerlong),
      map = new qq.maps.Map(mapRefs, {
        center: center,
        zoom: zoom,
        //设置控件的地图类型和位置
        mapTypeControlOptions: {
          //设置控件的地图类型ID，ROADMAP显示普通街道地图，SATELLITE显示卫星图像，HYBRID显示卫星图像上的主要街道透明层
          mapTypeIds: [
            qq.maps.MapTypeId.ROADMAP
          ]
        }
      }),
      circle = new qq.maps.Circle({
      //圆形的中心点坐标。
      center: center,
      //圆形是否可点击。
      clickable: clickable,
      //鼠标在圆形内的光标样式。
      cursor: cursor,
      //圆形的填充色，可通过Color对象的alpha属性设置透明度。
      //fillColor: "#00f",
      fillColor: fillColorKey,
      //要显示圆形的地图。
      map: map,
      //圆形的半径。
      radius: radius,
      //圆形的边框颜色，可通过Color对象的alpha属性设置透明度。
      strokeColor:  strokeColorKey,
      //圆形的边框样式。实线是solid，虚线是dash。
      strokeDashStyle: strokeDashStyle,
      //圆形的边框线宽。
      strokeWeight: strokeWeight,
      //圆形是否可见。
      visible: visible,
      //圆形的zIndex值。
      zIndex: zIndex
    });

    // 显示开始位置 
    let centerMarker = new qq.maps.Marker({
      //设置Marker的位置坐标
      position: new qq.maps.LatLng(markerlat,markerlong),
      //设置显示Marker的地图
      map: map
    })

    let anchor = new qq.maps.Point(11, 34),
      size = new qq.maps.Size(22, 36),
      origin = new qq.maps.Point(0, 0),
      icon = new qq.maps.MarkerImage(
        circleIconPic,
        size,
        origin,
        anchor
      )
    centerMarker.setIcon(icon)

    // 显示开始位置 
    let onMarker = new qq.maps.Marker({
      //设置Marker的位置坐标
      position: new qq.maps.LatLng(startlat,startlong),
      //设置显示Marker的地图
      map: map
    })

    let onanchor = new qq.maps.Point(6, 6),
      onsize = new qq.maps.Size(12, 12),
      onorigin = new qq.maps.Point(0, 0),
      onicon = new qq.maps.MarkerImage(
        onIconPic,
        onsize,
        onorigin,
        onanchor
      )
    onMarker.setIcon(onicon)
  }

  render() {
    return (
      <div className="map-layout">
        <div className="map-container" ref="mapcontainer"></div>
      </div>
    )
  }
}
module.exports = CircleMap