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

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

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

class LineMap 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 = {
    driver_show : React.PropTypes.bool,
    driver_lat: React.PropTypes.string, // 司机坐标 － 纬度
    driver_lng: React.PropTypes.string, // 司机坐标 － 经度
    start_address : React.PropTypes.string, // 起点 － 名称
    end_address : React.PropTypes.string, // 终点 － 名称
    bindself : React.PropTypes.func,
    zoom : React.PropTypes.number
  }

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

  }

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

  appendMap(){
    let mapRefs = this.refs.mapcontainer,
      {driver_lat,driver_lng,start_address,end_address,bindself,driver_show,zoom,driverhead,driversize,driverorigin,driveranchor} = this.props

    let 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) {
      // 显示司机位置 
      let marker = new qq.maps.Marker({
          //设置Marker的位置坐标
          position: new qq.maps.LatLng(driver_lat, driver_lng),
          //设置显示Marker的地图
          map: map
      })

      let 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)
    }
  }

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