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

柔光的暖阳◎ 2023-06-07 08:29 30阅读 0赞

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlzY3Nkbg_size_16_color_FFFFFF_t_70][]

然后改之后看看：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlzY3Nkbg_size_16_color_FFFFFF_t_70 1][]

是不是好看很多！！！

只贴部分代码片段哈，主要用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])
          })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlzY3Nkbg_size_16_color_FFFFFF_t_70]: /images/20230601/4857a7d1b75b47c495603a7c4c8a8627.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlzY3Nkbg_size_16_color_FFFFFF_t_70 1]: /images/20230601/0c47c2ddfa684df3a62072b5d779ddb6.png