jimu-mobile
Version:
积木组件库助力移动端开发
160 lines (136 loc) • 7.55 kB
JavaScript
// const startIconPic = require('../../styles/image/map_icon_on_1.png')
// const endIconPic = require('../../styles/image/map_icon_off_1.png')
import React, { Component,PropTypes } from 'react'
import ReactDOM from 'react-dom'
// 组件基于 qq地图 需先引用 //map.qq.com/api/js?v=2.exp
class PathMap 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 = {
points: React.PropTypes.array // 坐标点集合 {"latitude":40.04571,"longitude":116.30887}
}
static 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）的相对像素坐标
}
componentDidMount() {
let {points} = this.props,
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")
}
// 获取数组最大值
getArrMax(arr){
return Number(Math.max.apply(null, arr))
}
// 获取数组最小值
getArrMin(arr){
return Number(Math.min.apply(null, arr))
}
appendMap(){
let self = this,
mapRefs = this.refs.mapcontainer,
{midlat,midlon} = this.state,
{points,strokeColor,strokeWeight,zoom,startIconPic,startIconAnchor,startIconSize,startIconOrigin,endIconPic,endIconAnchor,endIconSize,endIconOrigin} = this.props
let 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
]
}
})
let polygon = new qq.maps.Polyline({
map: map,
path: self._drawPath(qq,points),
strokeColor: strokeColor,
strokeWeight: strokeWeight,
editable: false
})
// 显示开始位置
let startMarker = new qq.maps.Marker({
//设置Marker的位置坐标
position: new qq.maps.LatLng(points[0][0], points[0][1]),
//设置显示Marker的地图
map: map
})
// 显示结束位置
let lastPoints = points[points.length - 1],
endMarker = new qq.maps.Marker({
//设置Marker的位置坐标
position: new qq.maps.LatLng(lastPoints[0], lastPoints[1]),
//设置显示Marker的地图
map: map
})
let 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)
}
_drawPath(qq,path){
let newPath = path.map(function(re,index){
return new qq.maps.LatLng(re[0],re[1])
})
return newPath
}
render() {
return (
<div className="map-layout">
<div className="map-container" ref="mapcontainer"></div>
</div>
)
}
}
module.exports = PathMap