首先在根目录public中的index.html引入高德地图
<script type="text/javascript" src="/maps?v=1.4.15&key=(你的key)&plugin=AMap.MouseTool,AMap.MapType,AMap.Autocomplete,AMap.PlaceSearch,AMap.MarkerClusterer,AMap.Driving,AMap.MoveAnimation"></script>
<template><!-- 地图 --><div id="container" style="width: 100%;height: 100%"></div><!-- 触发按钮 --><div><a-button type="primary" @click="carSearch">搜索</a-button></div><!-- 轨迹回放控制 --><div class="controlBoxButton"><div @click="startAnimation()">开始动画</div><div @click="pauseAnimation()">暂停动画</div><div @click="resumeAnimation()">继续动画</div><div @click="stopAnimation()">停止动画</div></div><!-- 标点弹窗 --><div id="mapInfoWindow"><div>{{siteData.name}}</div><div>累计停留时间：{{siteData.time}}秒</div><div>{{siteData.startDate}}{{siteData.uploadTime}}</div></div></template>
data(){markerIcon:{car: require("@/assets/car.png"),label: require("@/assets/label.png"),},},mounted(){this.initMap();},methods: {//map初始化initMap() {this.map = new AMap.Map('container', {resizeEnable: true,zoom: 13,//缩放级别center: [119.761878, 29.126898],//地图中心点}); },//小车线路回放carSearch() {let that =this;//处理接口返回数据格式 (格式为[[经度，纬度],[经度，纬度].......])this.lineArr = [];res为请求接口获得的线路数据res.result.points.map((item)=>{this.lineArr.push([item.longitude,item.latitude])});//设置小车iconlet car = new AMap.Icon({image: that.markerIcon.car,//自定义小车图形size: new AMap.Size(140, 50),//图标大小imageSize: new AMap.Size(80, 50),//图标所用图片大小imageOffset: new AMap.Pixel(0, -10)//图标所用图片偏移量});//设置markerlet position = [res.result.points[0].longitude,res.result.points[0].latitude];this.marker = new AMap.Marker({position: position,//小车开始时位置icon: car,autoRotation: true,//自动旋转angle:-90,//旋转角度map:that.map});// 绘制轨迹let polyline = new AMap.Polyline({map: that.map,path: that.lineArr,showDir:true,//显示折线箭头strokeColor: "#557aa6", //线颜色// strokeOpacity: 1, //线透明度strokeWeight: 6, //线宽// strokeStyle: "solid" //线样式});let passedPolyline = new AMap.Polyline({map: that.map,strokeColor: "#AF5",// strokeOpacity: 1, //线透明度strokeWeight: 6,// strokeStyle: "solid" //线样式});this.marker.on('moving', function (e) {passedPolyline.setPath(e.passedPath);// that.map.setCenter(e.target.getPosition(),true) //设置后地图跟随小车移动});this.initCarSite();//配置线路中的标点位置//调整合适位置this.map.setFitView();},//配置线路中的标点initCarSite(){let that = this;//res为请求接口获得的站点数据res.result.slowPoints.map((item)=>{let icon = new AMap.Icon({image: that.markerIcon.label,size: new AMap.Size(80, 80),imageSize: new AMap.Size(40, 40),imageOffset: new AMap.Pixel(-10, 10)});let marker = new AMap.Marker({icon: icon,position: [item.longitude, item.latitude],});that.map.add(marker);//设置信息弹窗marker.siteData = item;AMap.event.addListener(marker, "click", function () {that.openInfoWindow(marker)});})},//配置信息窗口openInfoWindow(marker) {let that = this;that.siteData = marker.siteData;let content = document.getElementById("mapInfoWindow");let infoWindow = new AMap.InfoWindow({content: content,offset: new AMap.Pixel(0, 0)});infoWindow.on("close");infoWindow.open(that.map, marker.getPosition());},//控制小车的一些事件startAnimation(){this.marker.moveAlong(this.lineArr,800);//开始动画(800为速度)},pauseAnimation(){this.marker.pauseMove();//暂停动画},resumeAnimation(){this.marker.resumeMove();//继续动画},stopAnimation(){this.marker.stopMove();//停止动画},}
