高德地图的汽车路线规划的路线颜色样式更改

高德用的汽车路线规划,动画回放的功能,路线颜色改不了,粗细也改不了,所以会很丑。甲方爸爸很生气,后果很严重!!!

先来欣赏一下改之前的长什么样

然后改之后看看:

是不是好看很多!!!

只贴部分代码片段哈,主要用react, 下面的代码我是写在componentDidUpdate里面的,用的高德JS API哈~


const { Map, Marker, Size, Pixel } = window.AMap
    const AMapIcon = window.AMap.Icon

// 有地图的时候设置缩放,这里是因为我们用了高清解决方案,所以在有地图的时候要设置一下scale缩放和字体大小,没有地图的时候不设置,因为之前在iPhoneX上面出现过四分之一屏的现象。
    if ((currentStatus !== 0 && currentStatus !== 1 && currentStatus !== 8 && currentStatus !== 4 && currentStatus !== 5) && currentStatus !== 13) {
      console.log('has map')
      const scale = 0.65
      window.viewportScale = 1
      const metaArr = document.head.getElementsByTagName('meta')
      for (let i = 0; i < metaArr.length; i++) {
        const metaEl = metaArr[i]
        if (metaEl.name === 'viewport') {
          metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${ scale },maximum-scale=${ scale },minimum-scale=${ scale }`)
        }
      }
      document.documentElement.style.fontSize = '75px'
    }

if (!this.map) {
      // 初始化地图
      this.map = new Map(this.mapNode, {
        center: [centerlongitude, centerlatitude],
        resizeEnable: true,
        expandZoomRange:true,
        zoom:19,
        zooms:[3, 19],
      })
    }

// 获取司机经纬度
      const driverPoint = [driver.longitude, driver.latitude]
      const startIcon = new AMapIcon({
        // image: require('../img/start-point.png'),
        image: require('../img/qiche.png'),
        size:  new Size(78, 34),
      })
      this.driverMark = new Marker({
        position:    driverPoint,
        icon:        startIcon,
        autoFitView: true,
        autoRotation: true,
        // offset:      new Pixel(-32, -70),
        offset:      new Pixel(-14, -20),
      })
      this.driverMark.setMap(this.map)
      const endPoint = [destination.longitude, destination.latitude]
      const endIcon = new AMapIcon({
        image: require('../img/end-point.png'),
        size:  new Size(66, 75),
      })

      this.endMark = new Marker({
        position:    endPoint,
        icon:        endIcon,
        zoom:        1,
        autoFitView: true,
        offset:      new Pixel(-32, -70),
      })
      this.endMark.setMap(this.map)

this.map.plugin('AMap.Driving', () => {
        // 我的路线规划
        const myDriving = new window.AMap.Driving({
          map:         this.map,
          hideMarkers: true,
          isOutline:false,
          outlineColor:'#28F',
          autoFitView:  true,
          policy: window.AMap.DrivingPolicy.LEAST_TIME,
        })
        // 司机位置和终点的
        myDriving.search(driverPoint, endPoint, (status, result) => {
          console.log('555555')
          // 解析返回结果,自己生成操作界面和地图展示界面
          if (status === 'complete') {
            const { routes = [] } = result
            const { steps = [] } = routes[0]
            const pathArr = []
            steps.map(i => {
              pathArr.push(i.path)
              return pathArr
            })
            const path = flatten(pathArr)
            // 绘制轨迹
            const polyline = new window.AMap.Polyline({
              map: this.map,
              path,
              showDir:true,
              strokeColor: '#04be02',  // 线颜色
              strokeOpacity: 1,     // 线透明度
              strokeWeight: 10,      // 线宽
              strokeStyle: 'solid',  // 线样式
              lineJoin: 'round',  // 折线拐点的绘制样式
              zIndex:999,
            })
            polyline.setMap(this.map)
            this.driverMark.moveAlong(path, 1) // 汽车驾驶路线动画回放
          }
        })
        this.map.setFitView([this.driverMark, this.endMark])
      })
发布了115 篇原创文章 · 获赞 38 · 访问量 43万+

猜你喜欢

转载自blog.csdn.net/wangweiscsdn/article/details/102542593
今日推荐