vue 使用天地图实现描点、信息窗口、历史轨迹回放以及地图自适应容器

---

一、引入天地图

1.引入天地图

在Vue项目文件夹public下的index.html入口文件中引入天地图JavaScript API文件

//引入天地图在线链接 tk 为你自己申请的tk
  <script src="https://api.tianditu.gov.cn/api?v=3.0&tk=你申请的tk" type="text/javascript"></script>
// 使用运动轨迹时需要引入一下文件
  <script src="http://lbs.tianditu.gov.cn/js/lib/d3/d3.min.js" charset="utf-8"></script>
  <script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/D3SvgOverlay.js"></script>
  <script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/CarTrack.js"></script>

2.创建初始化文件

创建一个Vue中初始化的天地图的JS文件，用于指向天地图类

// 初始化地图
export default {
   
  init() {
   
    return new Promise((resolve, reject) => {
   
      // 如果已加载直接返回
      if (window.T) {
   
        console.log('地图脚本初始化成功...')
        resolve(window.T)
        reject('error')
      }
    })
  }
}

二、 地图初始化

页面

<template>
    <div class="map-content" v-loading="loading">
      <div class="input-card">
        <span>轨迹回放：</span>
        <el-button @click="startAnimation()">开始</el-button>
        <el-button @click="pauseAnimation()">暂停</el-button>
        <el-button @click="resumeAnimation()">继续</el-button>
      </div>
      <div id="transportMap" ref="tiandituMap"></div>
    </div>
</template>
<style lang="scss" scoped>
  .map-content {
   
    height: 100vh;
    position: relative;
  }

  #transportMap {
   
    width: 100%;
    height: 100%;
  }

  .input-card {
   
    z-index: 999;
    display: flex;
    align-items: center;
    padding: 20px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%)