第一步 注册高德开发者平台账号 （个人选择个人账户） 地址见/api
第二步 在控制台中申请Key（输入key，选择web端，提交即可）
第三步 通过JSApi Loader 获取高德Api 来结合Vue
按 NPM 方式安装使用 Loader ：
npmi@amap/amap-jsapi-loader --save
第四步 Vue项目中示例
轨迹回放（巡航器）实例：
巡航效果图：
<div id="container"></div>
data() {return {map: null,};},mounted() {this.initMap();},
！！！注意：使用的是Loader 使用时需要引入
import AMapLoader from "@amap/amap-jsapi-loader";
initMap() {AMapLoader.load({key: "xxxxxxx", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["AMap.ToolBar","AMap.Scale","AMap.HawkEye","AMap.MapType","AMap.Geolocation","AMap.ControlBar","AMap.Driving",], // 需要使用的的插件列表，如比例尺'AMap.Scale'等AMapUI: {// 是否加载 AMapUI，缺省不加载version: "1.1", // AMapUI 缺省 1.1plugins: [], // 需要加载的 AMapUI ui插件},}).then((AMap) => {this.map = new AMap.Map("container", {//设置地图容器idviewMode: "3D", //是否为3D地图模式// pitch:45, // 地图俯仰角度，有效范围 0 度- 83 度terrain: true, // 开启地形图zoom: 10, //初始化地图级别// "AMapUI": { // 是否加载 AMapUI，缺省不加载//version: '1.0',//plugins: ['overlay/SimpleMarker']//SimpleMarker设置自定义图标，PathSimplifier轨迹展示组件// },});// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件// this.map.addControl(new AMap.ToolBar());// 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺this.map.addControl(new AMap.Scale());// // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图// this.map.addControl(new AMap.HawkEye({ isOpen: true }));// // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制this.map.addControl(new AMap.MapType());// // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置// this.map.addControl(new AMap.Geolocation());this.routeLine();}).catch((e) => {console.log(e);});},
routeLine() {AMapUI.load(["ui/misc/PathSimplifier", "lib/$"], (PathSimplifier, $) => {if (!PathSimplifier.supportCanvas) {alert("当前环境不支持 Canvas！");return;}var pathSimplifierIns = new PathSimplifier({zIndex: 100,//autoSetFitView:false,map: this.map, //所属的地图实例getPath: function (pathData, pathIndex) {return pathData.path;},getHoverTitle: function (pathData, pathIndex, pointIndex) {if (pointIndex >= 0) {//pointreturn (pathData.name +"，点：" +pointIndex +"/" +pathData.path.length);}return pathData.name + "，点数量" + pathData.path.length;},renderOptions: {renderAllPointsIfNumberBelow: 100, //绘制路线节点，如不需要可设置为-1},});window.pathSimplifierIns = pathSimplifierIns;pathSimplifierIns.setData([{name: "路线0",path: data.data.list[0], // data为后端接口数据},]);//对第一条线路（即索引 0）创建一个巡航器// this.map.on('complete', function() {var navg1 = pathSimplifierIns.createPathNavigator(0, {// loop: true, //循环播放speed: 50, //巡航速度，单位千米/小时});navg1.start();// })});},
如果需要回放功能，执行下面的函数即可
// 回放功能Repeat() {if (window.pathSimplifierIns) {//通过该方法清空上次传入的轨迹pathSimplifierIns.setData([{name: "路线0",path: data.data.list[0],},]);}pathSimplifierIns.createPathNavigator(0, {// loop: true, //循环播放speed: 50 , //巡航速度，单位千米/小时}).start();},
巡航效果切换为海量点，点击海量点显示信息弹窗：
海量点效果图：
前面的代码都一样，切换为海量点时（随便设置一个flag），只需要initMap函数调用的routeLine函数替换为pointScreen函数即可。
pointScreen函数代码如下：
pointScreen() {AMapUI.load(["ui/misc/PointSimplifier", "lib/$"],(PointSimplifier, $) => {if (!PointSimplifier.supportCanvas) {alert("当前环境不支持 Canvas！");return;}var pointSimplifierIns = new PointSimplifier({map: this.map,getPosition: function (item) {// console.log(item);if (!item) return null;var parts = item.geometry.coordinates;return [parseFloat(parts[0]), parseFloat(parts[1])];},getHoverTitle: function (dataItem, idx) {//dataItem 是下面传入数据pointdata的元素，结构也取决于pointdatalet html = `<div class="hoverbox"><div class="hoverbox_content"><p>时间：${dataItem.properties.time}</p><p>流速：${dataItem.properties.flow} L/min</p><p>定位精度：${dataItem.properties.accu} m</p><p>航向：${dataItem.properties.course} °</p><p>消息：${dataItem.properties.mtime}</p><p>类型：${dataItem.properties.type === "Feature" ? "实时" : ""}</p><p>频率：${dataItem.properties.interval} s</p></div></div>`;return html;},renderOptions: {//点的样式//点的样式pointStyle: {//绘制点占据的矩形区域content: PointSimplifier.Render.Canvas.getImageContent("/theme/v1.3/markers/n/mark_b1.png",function onload() {pointSimplifierIns.renderLater();},function onerror(e) {alert("图片加载失败！");}),//宽度width: 19,//高度height: 31,//定位点为底部中心offset: ["-50%", "-100%"],fillStyle: null,strokeStyle: null,},//鼠标hover时的title信息hoverTitleStyle: {position: "top",classNames: "hoverbox",},},});pointSimplifierIns.on("pointClick", (e, dataItem) => {this.infoBox(dataItem);});window.pointSimplifierIns = pointSimplifierIns;pointSimplifierIns.setData(pointdata); //pointdata应该为后端接口数据，这里自己模拟的数据});},
infoBox(dataItem) {let html = `<div class='hoverbox'><div class="hoverbox_content"><p>时间：${dataItem.data.properties.time}</p><p>流速：${dataItem.data.properties.flow} L/min</p><p>定位精度：${dataItem.data.properties.accu} m</p><p>航向：${dataItem.data.properties.course} °</p><p>消息：${dataItem.data.properties.mtime}</p><p>类型：${dataItem.data.properties.type === "Feature" ? "实时" : ""}</p><p>频率：${dataItem.data.properties.interval} s</p></div></div>`;var infoWindow = new AMap.InfoWindow({content: html, //使用默认信息窗体框样式，显示信息内容offset: new AMap.Pixel(0, -31),isCustom:true,//是否自定义窗体。设为true时，信息窗体外框及内容完全按照content所设的值添加（默认为false，即在系统默认的信息窗体外框中显示content内容）autoMove:true,//是否自动调整窗体到视野内（当信息窗体超出视野范围时，通过该属性设置是否自动平移地图，使信息窗体完全显示）retainWhenClose:true, //信息窗体关闭时，是否将其Dom元素从页面中移除，默认为falsezIndex:100000 //官网没有写明这个属性。导致海量点和信息弹窗蒙层出现问题。在content的样式hoverbox中添加z-index没有效果。我也是尝试了很久，在这里添加了zIndex 就可以了});infoWindow.open(this.map, dataItem.data.geometry.coordinates);},
关闭的回调我没有去写，很简单，官网写的很详细了
上面使用到的数据比较大（动辄上万），不好粘贴（我的数据也是捞网站上面的接口数据到本地的）。
官网有mock 数据 大家可以看一下
比如这个城市数据 ：/jsapi_demos/static/citys.js
巡航的部分数据：
海量点的数据部分：
vue 使用高德JSapi 实现轨迹回放和海量点效果（点击显示详情提示窗口） 采用AMapLoader 和 AMapUI
