高德地图画路线+弹窗展示内容，polyline画线

效果图
最长的线是高速公路某一段的截取，绿色区域是畅通路段，中间黄色区域是拥堵路段，红色区域是严重拥堵路段

因为只要纯展示，所以数据都是写的假数据。调接口的应该也不难，但是要按实际返回的接口看怎么处理、

首先有个容器装地图，给个具体的高度。

<template>    
    <div style="position: relative;height: 580px;">
      <div id="container" style="height:100%">
      </div>
    </div>
</template>

data中定义假数据，数据就是这条线的经纬度，它是由点连成线，这个要自己准备了。

 data() {
    return {
      cpInfo: {
        zoom: parseInt(12),
        provincename: '江苏省',
        provinceid: parseInt(32),
        center: [parseFloat(119.475118), parseFloat(32.46915)]
      },
      polyline: {},
      pts: [
        [119.602745, 32.490238],
        [119.601974, 32.490185],
        [119.599007, 32.489899],
        [119.598305, 32.489807],
      ...约有两百条
      ],
      pts1: [
        [119.517067, 32.469776],
        [119.512367, 32.468735],
        ...约有100条
      ],
      pts2: [
        [119.490685, 32.467205],
        [119.488052, 32.467232],
        [119.487305, 32.467236],
       ...约有50条
      ],
      tip_marker: null,
      //xxx处是内容
       title:
        '<div style="padding: 15px;background:rgba(37,36,41,1);width:220px;height:40px;border:1px solid rgba(204,204,204,1); border-radius:6px;">' +
        '<ul style="list-style: none;color: #FFFFFF;font-size: 13px;text-align:left;font-weight:400;font-family:Microsoft YaHei; padding-inline-start: 0px;">' +
        '<li style="text-align:left;margin-top:5px line-height:24px;">' +
        '<span>xxxx：</span><span style="background:rgba(240,142,25,1); border-radius:2px; width:70px; padding:0 5px 0 5px">xxxxxx' +
        '</span> </li>' + '</ul>' + '</div>',
    }
  },

  mounted() {
    this.init1()
  },

methods: {
    init1() {
      const This = this
      //实例化地图
      const map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: This.cpInfo.zoom,
        //this.cpInfo.zoom,
        zooms: [3, 17],
        mapStyle: 'amap://styles/blue', 默认地图样式(normal)
        center: This.cpInfo.center
      })
      map.setDefaultCursor('crosshair')
      this.map = map
      this.AMap = AMap
      this.drawLine()
    },
    drawLine() {
      let me = this
      let AMap = this.AMap
      me.polyline1 = new AMap.Polyline({
        map: me.map,
        path: me.pts,
        strokeColor: '#486E30',
        strokeOpacity: 1,
        strokeWeight: 7,
        lineJoin: 'round',
        lineCap: 'round'

      })
      me.polyline2 = new AMap.Polyline({
        map: me.map,
        path: me.pts1,
        strokeColor: '#FC7E1F',
        strokeOpacity: 1,
        strokeWeight: 5,
        lineJoin: 'round',
        lineCap: 'round'

      })
      me.polyline3 = new AMap.Polyline({
        map: me.map,
        path: me.pts2,
        strokeColor: '#F55236',
        strokeOpacity: 1,
        strokeWeight: 5,
        lineJoin: 'round',
        lineCap: 'round',
        isOutline: false
      })
      // 鼠标经过
      me.polyline3.on('mouseover', function(event) {
        event.target.setOptions({
          isOutline: true
        })
        me.tip_marker = new AMap.Marker({ content: ' ', map: me.map })
        me.tip_marker.setPosition(event.lnglat)
        me.tip_marker.setLabel({content:me.title})
      })
      // 鼠标离开
      me.polyline3.on('mouseout', function(event) {
        event.target.setOptions({
          isOutline: false
        })
        me.tip_marker.setMap(null)
        me.tip_marker = null
      })
      me.map.setFitView()
    }
  }

高德地图的key申请过程可以看其他的文章，希望对你有帮助