jimu-mobile
Version:
积木组件库助力移动端开发
196 lines (163 loc) • 10.7 kB
JavaScript
;
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; // const startIconPic = require('../../styles/image/map_icon_on_1.png')
// const endIconPic = require('../../styles/image/map_icon_off_1.png')
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
var PathMap = (_temp = _class = function (_Component) {
_inherits(PathMap, _Component);
function PathMap(props) {
_classCallCheck(this, PathMap);
var _this = _possibleConstructorReturn(this, (PathMap.__proto__ || Object.getPrototypeOf(PathMap)).call(this, props));
_this.appendMap = _this.appendMap.bind(_this);
return _this;
}
_createClass(PathMap, [{
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() {
var points = this.props.points,
latitude = [],
longitude = [];
// 重组数据
points.map(function (re, index) {
latitude.push(re[0]);
longitude.push(re[1]);
});
this.state = {
midlat: (this.getArrMax(latitude) + this.getArrMin(latitude)) / 2,
midlon: (this.getArrMax(longitude) + this.getArrMin(longitude)) / 2
};
window.appendMap = this.appendMap;
this.loadScript("//map.qq.com/api/js?v=2.exp&callback=appendMap");
}
// 获取数组最大值
}, {
key: 'getArrMax',
value: function getArrMax(arr) {
return Number(Math.max.apply(null, arr));
}
// 获取数组最小值
}, {
key: 'getArrMin',
value: function getArrMin(arr) {
return Number(Math.min.apply(null, arr));
}
}, {
key: 'appendMap',
value: function appendMap() {
var self = this,
mapRefs = this.refs.mapcontainer,
_state = this.state,
midlat = _state.midlat,
midlon = _state.midlon,
_props = this.props,
points = _props.points,
strokeColor = _props.strokeColor,
strokeWeight = _props.strokeWeight,
zoom = _props.zoom,
startIconPic = _props.startIconPic,
startIconAnchor = _props.startIconAnchor,
startIconSize = _props.startIconSize,
startIconOrigin = _props.startIconOrigin,
endIconPic = _props.endIconPic,
endIconAnchor = _props.endIconAnchor,
endIconSize = _props.endIconSize,
endIconOrigin = _props.endIconOrigin;
var map = new qq.maps.Map(mapRefs, {
// 地图的中心地理坐标。
center: new qq.maps.LatLng(midlat, midlon),
zoom: zoom,
//设置控件的地图类型和位置
mapTypeControlOptions: {
//设置控件的地图类型ID，ROADMAP显示普通街道地图，SATELLITE显示卫星图像，HYBRID显示卫星图像上的主要街道透明层
mapTypeIds: [qq.maps.MapTypeId.ROADMAP]
}
});
var polygon = new qq.maps.Polyline({
map: map,
path: self._drawPath(qq, points),
strokeColor: strokeColor,
strokeWeight: strokeWeight,
editable: false
});
// 显示开始位置
var startMarker = new qq.maps.Marker({
//设置Marker的位置坐标
position: new qq.maps.LatLng(points[0][0], points[0][1]),
//设置显示Marker的地图
map: map
});
// 显示结束位置
var lastPoints = points[points.length - 1],
endMarker = new qq.maps.Marker({
//设置Marker的位置坐标
position: new qq.maps.LatLng(lastPoints[0], lastPoints[1]),
//设置显示Marker的地图
map: map
});
var startanchor = new qq.maps.Point(startIconAnchor[0], startIconAnchor[1]),
startsize = new qq.maps.Size(startIconSize[0], startIconSize[1]),
startorigin = new qq.maps.Point(startIconOrigin[0], startIconOrigin[1]),
starticon = new qq.maps.MarkerImage(startIconPic, startsize, startorigin, startanchor),
endanchor = new qq.maps.Point(endIconAnchor[0], endIconAnchor[1]),
endsize = new qq.maps.Size(endIconSize[0], endIconSize[1]),
endorigin = new qq.maps.Point(endIconOrigin[0], endIconOrigin[1]),
endIcon = new qq.maps.MarkerImage(endIconPic, endsize, endorigin, endanchor);
startMarker.setIcon(starticon);
endMarker.setIcon(endIcon);
}
}, {
key: '_drawPath',
value: function _drawPath(qq, path) {
var newPath = path.map(function (re, index) {
return new qq.maps.LatLng(re[0], re[1]);
});
return newPath;
}
}, {
key: 'render',
value: function render() {
return _react2.default.createElement(
'div',
{ className: 'map-layout' },
_react2.default.createElement('div', { className: 'map-container', ref: 'mapcontainer' })
);
}
}]);
return PathMap;
}(_react.Component), _class.propTypes = {
points: _react2.default.PropTypes.array // 坐标点集合 {"latitude":40.04571,"longitude":116.30887}
}, _class.defaultProps = {
points: [[40.05633, 116.32776], [40.05584, 116.32812], [40.05584, 116.32812], [40.05554, 116.32834], [40.05554, 116.32834], [40.05558, 116.32849], [40.05561, 116.32858], [40.05566, 116.32866], [40.0557, 116.3287], [40.05575, 116.32876], [40.05575, 116.32876], [40.05643, 116.32822], [40.05661, 116.32806], [40.05673, 116.32798], [40.05684, 116.32792], [40.05691, 116.32788], [40.05702, 116.3278], [40.05753, 116.32761], [40.05753, 116.32761], [40.05774, 116.32751], [40.05785, 116.32747], [40.05791, 116.32743], [40.05839, 116.32715], [40.05839, 116.32715], [40.05876, 116.32686], [40.05876, 116.32686], [40.05957, 116.32623], [40.0602, 116.32574], [40.0602, 116.32574], [40.06084, 116.32525], [40.06084, 116.32525], [40.06092, 116.32519], [40.06183, 116.32444], [40.06183, 116.32444], [40.06187, 116.32441], [40.06239, 116.32397], [40.06298, 116.32352], [40.063, 116.3235], [40.06304, 116.32347], [40.06377, 116.32292], [40.06377, 116.32292], [40.06392, 116.32367], [40.06395, 116.32379], [40.06396, 116.32381], [40.06398, 116.32395], [40.06398, 116.32395], [40.06416, 116.32478], [40.06416, 116.32478], [40.06419, 116.32492], [40.06419, 116.32492], [40.06423, 116.32511], [40.06443, 116.32613], [40.06443, 116.32613], [40.06463, 116.32705], [40.06463, 116.32705], [40.06465, 116.32715], [40.06469, 116.32722], [40.06472, 116.32726], [40.06483, 116.3273], [40.06495, 116.32738], [40.06495, 116.32738], [40.06497, 116.3275], [40.06504, 116.32807], [40.06504, 116.32807], [40.06505, 116.32812], [40.06516, 116.32916], [40.06518, 116.32932], [40.06528, 116.33038], [40.06533, 116.33073], [40.06533, 116.33073], [40.06543, 116.33171], [40.06543, 116.33171], [40.06548, 116.33244], [40.06548, 116.33244], [40.06548, 116.33258], [40.06548, 116.33258], [40.06548, 116.33265], [40.06548, 116.33265], [40.06551, 116.33308], [40.06547, 116.33413], [40.06546, 116.33471], [40.06545, 116.33486], [40.06545, 116.33486], [40.06545, 116.33496], [40.06545, 116.33496], [40.06571, 116.33496], [40.06637, 116.33496], [40.06729, 116.33496], [40.06729, 116.33496], [40.06792, 116.33497], [40.06832, 116.33497], [40.06832, 116.33497], [40.06839, 116.33497], [40.06839, 116.33497], [40.06886, 116.33496], [40.06942, 116.33496], [40.07001, 116.33497], [40.07056, 116.33496], [40.07072, 116.33496], [40.07123, 116.33494], [40.07127, 116.33493], [40.07127, 116.33493], [40.07132, 116.33493], [40.07143, 116.33492], [40.07143, 116.33492], [40.07274, 116.33476], [40.07291, 116.33475], [40.07309, 116.33472], [40.07309, 116.33472], [40.07307, 116.33462], [40.07307, 116.33462], [40.07307, 116.33454], [40.07307, 116.33454], [40.07305, 116.33432], [40.07305, 116.33432], [40.07302, 116.33405], [40.07302, 116.33405], [40.07335, 116.33401], [40.07335, 116.33401], [40.07327, 116.33335], [40.07332, 116.33326], [40.07335, 116.33311]],
strokeColor: "#32CD32",
strokeWeight: 5,
zoom: 11,
startIconPic: require('../../styles/image/map_icon_on_1.png'),
startIconAnchor: [11, 34], // anchor是锚点坐标，描述经纬度点对应图标中的位置
startIconSize: [22, 36], // 图标尺寸，该尺寸为显示图标的实际尺寸
startIconOrigin: [0, 0], // rigin是切图坐标，该坐标是相对于图片左上角默认为（0,0）的相对像素坐标
endIconPic: require('../../styles/image/map_icon_off_1.png'),
endIconAnchor: [11, 34], // anchor是锚点坐标，描述经纬度点对应图标中的位置
endIconSize: [22, 36], // 图标尺寸，该尺寸为显示图标的实际尺寸
endIconOrigin: [0, 0] // rigin是切图坐标，该坐标是相对于图片左上角默认为（0,0）的相对像素坐标
}, _temp);
module.exports = PathMap;