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

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

'use strict';

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _class, _temp;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

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

// 组件基于 qq地图 需先引用 //map.qq.com/api/js?v=2.exp

var CircleMap = (_temp = _class = function (_Component) {
  _inherits(CircleMap, _Component);

  function CircleMap(props) {
    _classCallCheck(this, CircleMap);

    var _this = _possibleConstructorReturn(this, (CircleMap.__proto__ || Object.getPrototypeOf(CircleMap)).call(this, props));

    _this.appendMap = _this.appendMap.bind(_this);
    return _this;
  }

  _createClass(CircleMap, [{
    key: 'loadScript',
    value: function loadScript(jssrc) {
      //创建script标签
      var script = document.createElement("script");
      //设置标签的type属性
      script.type = "text/javascript";
      //设置标签的链接地址
      script.src = jssrc;
      //添加标签到dom
      document.body.appendChild(script);
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      window.appendMap = this.appendMap;
      this.loadScript("//map.qq.com/api/js?v=2.exp&callback=appendMap");
    }
  }, {
    key: 'isArray',
    value: function isArray(object) {
      return object && (typeof object === 'undefined' ? 'undefined' : _typeof(object)) === 'object' && Array == object.constructor;
    }
  }, {
    key: 'appendMap',
    value: function appendMap() {
      var mapRefs = this.refs.mapcontainer,
          _props = this.props,
          clickable = _props.clickable,
          cursor = _props.cursor,
          fillColor = _props.fillColor,
          radius = _props.radius,
          strokeDashStyle = _props.strokeDashStyle,
          strokeColor = _props.strokeColor,
          strokeWeight = _props.strokeWeight,
          visible = _props.visible,
          zIndex = _props.zIndex,
          markerlat = _props.markerlat,
          markerlong = _props.markerlong,
          startlat = _props.startlat,
          startlong = _props.startlong,
          zoom = _props.zoom;


      var 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;

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

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

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

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

      var 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);
    }
  }, {
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        'div',
        { className: 'map-layout' },
        _react2.default.createElement('div', { className: 'map-container', ref: 'mapcontainer' })
      );
    }
  }]);

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

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

  startlat: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.number]),
  startlong: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.number]),
  zoom: _react2.default.PropTypes.number
}, _class.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
}, _temp);

module.exports = CircleMap;