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

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

'use strict';

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

// 组件基于 qq地图 需先引用 //map.qq.com/api/js?v=2.exp
// const driverhead = require('../../styles/image/driverhead.png')

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

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

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

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

  _createClass(LineMap, [{
    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: 'appendMap',
    value: function appendMap() {
      var mapRefs = this.refs.mapcontainer,
          _props = this.props,
          driver_lat = _props.driver_lat,
          driver_lng = _props.driver_lng,
          start_address = _props.start_address,
          end_address = _props.end_address,
          bindself = _props.bindself,
          driver_show = _props.driver_show,
          zoom = _props.zoom,
          driverhead = _props.driverhead,
          driversize = _props.driversize,
          driverorigin = _props.driverorigin,
          driveranchor = _props.driveranchor;


      var map = new qq.maps.Map(mapRefs, {
        center: new qq.maps.LatLng(driver_lat, driver_lng),
        zoom: zoom,
        //设置控件的地图类型和位置
        mapTypeControlOptions: {
          //设置控件的地图类型ID，ROADMAP显示普通街道地图，SATELLITE显示卫星图像，HYBRID显示卫星图像上的主要街道透明层
          mapTypeIds: [qq.maps.MapTypeId.ROADMAP]
        }
      });

      /*     设置获取驾车线路方案的服务   */
      var drivingService = new qq.maps.DrivingService({
        // position: center,
        map: map
      });
      var start = start_address;
      var end = end_address;

      // 设置回调函数
      drivingService.setComplete(function (result) {
        if (result.type == qq.maps.ServiceResultType.MULTI_DESTINATION) {
          //alert("起终点不唯一");
          var d = result.detail;
          drivingService.search(d.start[0], d.end[0]);
        }
      });
      // //设置检索失败回调函数
      // drivingService.setError(function(data) {
      //     alert(data);
      // })
      //设置驾驶路线的起点和终点
      drivingService.search(start, end);

      /*  司机位置绘制    */
      if (driver_show) {
        // 显示司机位置 
        var marker = new qq.maps.Marker({
          //设置Marker的位置坐标
          position: new qq.maps.LatLng(driver_lat, driver_lng),
          //设置显示Marker的地图
          map: map
        });

        var anchor = new qq.maps.Point(driveranchor[0], driveranchor[1]),
            size = new qq.maps.Size(driversize[0], driversize[1]),
            origin = new qq.maps.Point(driverorigin[0], driverorigin[1]),
            icon = new qq.maps.MarkerImage(driverhead, size, origin, anchor);
        marker.setIcon(icon);
        bindself(map, marker);
      }
    }
  }, {
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        'div',
        { className: 'map-layout' },
        _react2.default.createElement('div', { className: 'map-container', ref: 'mapcontainer' })
      );
    }
  }]);

  return LineMap;
}(_react.Component), _class.propTypes = {
  driver_show: _react2.default.PropTypes.bool,
  driver_lat: _react2.default.PropTypes.string, // 司机坐标 － 纬度
  driver_lng: _react2.default.PropTypes.string, // 司机坐标 － 经度
  start_address: _react2.default.PropTypes.string, // 起点 － 名称
  end_address: _react2.default.PropTypes.string, // 终点 － 名称
  bindself: _react2.default.PropTypes.func,
  zoom: _react2.default.PropTypes.number
}, _class.defaultProps = {
  driver_show: true, // 是否需要显示司机位置
  driver_lat: "40.043620000000", // 司机坐标 － 纬度
  driver_lng: "116.289740000000", // 司机坐标 － 经度
  start_address: "数字山谷B区", // 起点 － 名称
  end_address: "当代城市家园", // 终点 － 名称
  bindself: function bindself() {},
  zoom: 11,
  driverhead: require('../../styles/image/driverhead.png'),
  driversize: [32, 32],
  driverorigin: [0, 0],
  driveranchor: [20, 20]

}, _temp);

module.exports = LineMap;