我正在参加「创意开发投稿大赛」详情请看：掘金创意开发大赛来了！

前言

大家好，我是不是鱼d猫，听闻节日活动又出现了，趁着周末来更更文吧，作为前端小小白，仕途一帆风顺，爱情倒是一塌糊涂。不过码农们还是可以new个对象。前些日子公司刚要求做做地图轨迹回访。正好看了一下高德地图api。七夕临近，正好可以给各位有对象的安排上。

效果

实现

引入高德地图

引入前先还是得在高德地图公众平台申请key
可以通过js直接引入

    <script src="https://webapi.amap.com/maps?v=2.0&key=31e4a863a659961b3f28ad248227242f&plugin=AMap.CircleEditor"></script>

当然我这里在是在vue里面下载的依赖，具体可看看高德地图文档。

初始化地图

首先的构建地图容器，创建一个div盒子用来展示地图，再就是创建地图实例，一个地图就展现了。

initMap () {
      AMapLoader.load({
        key: '31e4a863a659961b3f28ad248227242f',
        version: '2.0',
        // 控件列表，比如鹰眼，比例尺
        plugins: ['AMap.Scale'],
        // 地图ui库，有些功能可不需要
        AMapUI: {
          version: '1.1',
          plugins: ['overlay/SimpleMarker']
        }
      }).then((AMap) => {
        this.map = new AMap.Map('ditu1', {
          viewMode: '3D',
          zoom: 10,
          // 地图中心，这里定位的是武汉
          center: [114.298572, 30.584355]
        })
        // 加入地图的控件，例如比例尺
        this.map.addControl(new AMap.Scale())
        // 信息窗口实例
        this.infoWindow = new AMap.InfoWindow({
          offset: new AMap.Pixel(0, 0)
        })
        this.getPath()
      }).catch(e => {
        console.log(e)
      })
    },

我们在vue的生命周期里面，初始化页面时就可以调用该方法了。
核心的地方来了，也就是动画，控制一个点沿着轨迹移动，在高德地图里面marker（也就是是地图上一个个点，可以设置样式，图标）对象其实有方法可以是其沿着polygon轨迹线移动（也就是轨迹，也可以自定义样式），但是做轨迹回放当然得有变速，暂时，继续，等等功能，给marker添加动画是不能实现的，那么就需要高德地图里面的ui库了，巡航器。

爱心轨迹

设置一个巡航器

var navg1 = that.pathSimplifierIns[0].createPathNavigator(0, {
          loop: false, // 循环播放
          speed: that.speed, // 巡航速度，单位千米/小时-默认70，动态设置
          dirToPosInMillsecs: 0,
          pathNavigatorStyle: {
            width: 40,
            height: 40,
            autoRotate: false, // 禁止调整方向
            // 经过路径的样式
            pathLinePassedStyle: {
              lineWidth: 6,
              strokeStyle: 'black',
              dirArrowStyle: {
                stepSpace: 15,
                strokeStyle: 'red'
              }
            },
            // 使用图片，可以安排上你宝子的头像
            content: PathSimplifier.Render.Canvas.getImageContent(that.icon2, onload, onerror)
          }
        })

设置巡航的轨迹

轨迹的数据格式是一个经纬度的二维数组

that.pathSimplifierIns[0] = new PathSimplifier({
          zIndex: 100,
          // autoSetFitView:false,
          map: that.map, // 所属的地图实例
          getPath: function (pathData, pathIndex) {
            return pathData.path
          },
          renderOptions: {
            renderAllPointsIfNumberBelow: 100 // 绘制路线节点，如不需要可设置为-1
          }
        })
 // 设置数据
that.pathSimplifierIns[0].setData([
  {
    name: '路线1',
    path: [...that.lineData1]
  }
])

巡航器添加事件

给巡航器添加移动的事件，巡航器在移动过程中，调用该方法，进而可以动态设置气泡的内容

navg2.on('move', function (e) {
          const idx = navg2.getCursor().idx // 走到了第几个点
          console.log(e)
          const cont = `<div class="toptit">
          <p>${that.titArr[idx]}</p>
          </div>`
          // 设置气泡
          that.infoWindow.setContent(cont)
          that.infoWindow.open(that.map, e.target.getPosition())
          that.dVal = that.lineData2[idx]
        })

气泡样式，可以自定义，距离marker的偏移量也可以设置。

开始播放

 // 开始播放
    start () {
      this.stopFlag = !this.stopFlag
      if (this.stopFlag) {
      // 给续航器设置速度
        this.navg[0].setSpeed(this.speed)
        this.navg[1].setSpeed(this.speed)
        this.navg[0].start()
        this.navg[1].start()
        this.spanInit()
      } else {
        clearInterval(this.timer)
        this.timer = null
        this.navg[0].pause()
        this.navg[1].pause()
      }
    },

bandicam 2022-08-01 00-17-49-437_.gif

爱心背景

操作dom，在页面新增img标签

<img class="img1" v-for="(item,index) in spanNum" :key="index" :style="item" :src='icon3' />

生成img样式

spanInit () {
      const width = this.$refs.notfound.clientWidth
      const height = this.$refs.notfound.clientHeight
      this.timer = setInterval(() => {
        // 爱心定位随机高与随机宽
        const x = width * Math.random()
        const y = height * Math.random()
        // 爱心的随机大小
        const scale = Math.random() * 2
        // 爱心出现动画的随机事件
        const time = Math.random() * 5
        // 加入不同爱心的样式
        this.spanNum.push({
          left: x + 'px',
          top: y + 'px',
          transform: 'scale(' + scale + ')',
          animationDelay: time + 's'
        })
      }, 100)
    }

开始播放的时候调用，并且启动定时器，出现爱心逐一生成的效果。暂停或者运动结束时清除定时器。不然定时器一直执行，浏览器会崩的。当然用canvas更简单，大家可以定要好好学。

最后

七夕来临，安排上。不过也可以升升级，看各位大佬们了，比如输入城市生成爱心的算法，上传头像等等。
最后
七夕文学安排上
/*
你太想一个结果了，所以你不快乐
你只是浇了一次水，你就希望这朵花永远为你开
人世间得失取舍，又不是只用你一个人爱而不得
理想主义只是理想主义，有些问题就没有答案
大家只是阶段性的陪伴，岁月会为你去轻描谈写
时间会未我们筛选对的人
*/

七夕倒计时中，我用高德地图实现“爱心”轨迹，给你的宝子安排上吧

前言

效果

实现