参考：https://elemefe.github.io/vue-amap/#/zh-cn/coverings/text
https://lbs.amap.com/api/javascript-api/reference-amap-ui/mass-data/pathsimplifier/
1、在vue 项目中的 main.js 中加入
import VueAMap from 'vue-amap'
/* 高德地图的引入 */
VueAMap.initAMapApiLoader({
key: '5ab20b9b8aad8959b51d74f0cc3bc0ce',
plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType'],
uiVersion: '1.0', // ui库版本，不配置不加载,
v: '1.4.4'
});
Vue.use(VueAMap);
2、在 index.html 中加入
<script src="http://webapi.amap.com/maps?v=1.4.6&key=e598f982202f82de4802cefed15fe8e5"></script> <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
注意：其中的 key 需要自己高德官网去注册获得。
3、这个时候 要把 高德组件加入 项目
在 terminal 执行 npm install --save vue-amap
下面是具体的定位代码
<template>
<div class="myTable">
<div class="input searchInfo" >
<span><span>ICCID：</span><input v-model="iccid" placeholder="请输入"></input></span>
<el-button type="primary" @click="findPosition" style="float: right; position: relative;left: -20px;" >搜索</el-button>
</div>
<div class="amap-page-container">
<el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo">
<el-amap-marker v-for="(marker, index) in markers" :position="marker.position" :content="marker.content" :angle="marker.angle" :events="marker.events" :title="marker.title" :visible="marker.visible" :draggable="marker.draggable" :vid="index"></el-amap-marker>
</el-amap>
</div>
</div>
</template>
<script>
import {axios} from "../../config/axios";
export default {
name: 'dev-position',
data () {
return {
iccid:'',
zoom: 15,
markers: [],
center: [114.037651, 22.627568],
}
},
methods:{
findPosition(){
axios.get("/api/contrail/flashPosition",{params:{iccid:this.iccid}}).then(result => {
var oneLogLat = result.data.data;
if (result.data.code != 200 || oneLogLat === null) {
console.log(result)
return
}
var oneArr = [];
var loglat = oneLogLat.split(",");
const currentLng = parseFloat(loglat[5]);
const currentLat = parseFloat(loglat[3]);
oneArr.push(currentLng);
oneArr.push(currentLat);
const dir = loglat[9]; // 方向角
this.myMarkers(oneArr, dir);
});
},
myMarkers(val,dir){
let marker = {
position: val,
events: {
click: () => {
console.log("获取信息失败")
},
},
content:'<img src="http://test.blackview4g.com:8280/images/car.png" />',
angle:dir,
title:title,
};
this.markers.push(marker);
},
}
}
</script>
<style scoped>
.input input{
position: relative;
display: inline-block;
border-radius: 5px;
height: 20px;
margin-right: 20px;
font-size: 16px;
line-height: 32px;
width: 250px;
padding-left: 8px;
}
.amap-page-container {
height: 600px;
}
</style>
下面是具体的轨迹代码
<template>
<div class="myTable">
<div class="input searchInfo" >
<span><span>ICCID：</span><input v-model="iccid" placeholder="请输入"></input></span>
<span><span>时间：</span>
<el-date-picker
v-model="startTime"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</span>
<el-button type="primary" @click="findTrackData" style="float: right; position: relative;left: -20px;" >搜索</el-button>
</div>
<div class="amap-page-container">
<div id="amap-show" class="amap-demo" style="height: 600px;"></div>
</div>
</div>
</template>
<script>
// NPM 方式
import { lazyAMapApiLoaderInstance } from 'vue-amap';
import carUrl from '../../assets/img/car.png'
export default {
name: "track-show",
data () {
return {
iccid:'',
startTime:'',
}
},
created() {
this.initMap();
console.log("thisDate:",this.startDate);
},
methods:{
findTrackData(){
console.log("thisDate:",this.startDate);
this.initPage();
},
getGPSData(){
this.$http.get("api/contrail/trackLocations",{params:{iccid: this.iccid,date:this.startTime}}).then(result => {
let code = result.data.code;
let gpsData = result.data.data;
this.loadState = false;
if (code !== 200 || gpsData === "" || gpsData === null) {
this.initMap();
return
}
var strArr = gpsData.split(";");
var length = strArr.length-1;
var resultStr = "";
for (var i = 0; i < length; i++) {
var gpsArr = strArr[i].split(",");
if(gpsArr[11] !== "1") {
continue; // 去除非 GPS 数据
}
var jd = gpsArr[3];
var wd = gpsArr[5];
resultStr += "[" + wd + "," + jd + "],";
}
if(resultStr === "") {
this.msg ();
this.initMap();
return;
};
resultStr = "[" + resultStr + "]";
this.initPage(resultStr);
})
},
getDurationGPSData(){
this.$http.get("api/contrail/durationLocations",{params:{iccid: this.iccid, startTime:this.startDate, endTime:this.startDate }}).then(result => {
let code = result.data.code;
let gpsData = result.data.data;
if (code !== 200 || gpsData === "" || gpsData === null) {
this.msg ();
this.initMap();
return
}
var strArr = gpsData.split(";");
var length = strArr.length-1;
var resultStr = "";
for (var i = 0; i < length; i++) {
var gpsArr = strArr[i].split(",");
if(gpsArr[11] !== "1") {
continue; // 去除非 GPS 数据
}
var jd = gpsArr[3];
var wd = gpsArr[5];
resultStr += "[" + wd + "," + jd + "],";
}
if(resultStr === "") {
this.msg();
this.initMap();
return;
}
resultStr = "[" + resultStr + "]";
this.initPage(resultStr);
})
},
initMap(){
lazyAMapApiLoaderInstance.load().then(() => {
this.map = new AMap.Map('amap-show', {
center: [114.037939,22.627198],
zoom: 11
}
)
});
},
initPage(){
console.log("===== init===");
lazyAMapApiLoaderInstance.load().then(() => {
this.map = new AMap.Map('amap-show', {
center: [114.037939,22.627198],
zoom: 6
},
AMapUI.loadUI(['misc/PathSimplifier'], (PathSimplifier) => {
if (!PathSimplifier.supportCanvas) {
alert('当前环境不支持 Canvas！');
return;
}
//创建组件实例
var pathSimplifierIns = new PathSimplifier({
zIndex: 100,
map: this.map, //所属的地图实例
getPath: (pathData) => {
//将gps描述的所有的点数放到全局变量
pathData.path.length; //返回轨迹数据中的节点坐标信息，[AMap.LngLat, AMap.LngLat...] 或者 [[lng|number,lat|number],...]
return pathData.path;
},
getHoverTitle: (pathData, pathIndex, pointIndex)=> {
//返回鼠标悬停时显示的信息
if (pointIndex >= 0) {
//鼠标悬停在某个轨迹节点上
return pathData.name + '，点:' + pointIndex + '/' + pathData.path.length;
}
//鼠标悬停在节点之间的连线上
return pathData.name + '，点数量' + pathData.path.length;
},
renderOptions: {
//轨迹线的样式
pathLineStyle: {
strokeStyle: 'red',
lineWidth: 3, //线宽度
dirArrowStyle:{
stepSpace:15 //stepSpace: {number} 箭头排布的间隔，单位像素
}
}
}
});
//这里构建两条简单的轨迹，仅作示例
// var gpsData = eval(data);
let gpsData = [[116.405289, 39.904987],[113.964458, 40.54664],[111.47836, 41.135964],[108.949297, 41.670904],[106.380111, 42.149509],[103.774185, 42.56996],[101.135432, 42.930601],[98.46826, 43.229964],[95.777529, 43.466798],[93.068486, 43.64009],[90.34669, 43.749086],[87.61792, 43.793308]];
pathSimplifierIns.setData([{
name: '轨迹0',
path: gpsData
}]);
var nav = pathSimplifierIns.createPathNavigator(0, {
loop: true,
speed: 400000,
pathNavigatorStyle: {
width: 16,
height: 32,
content: PathSimplifier.Render.Canvas.getImageContent(carUrl, onload, onerror),
strokeStyle: null,
fillStyle: null
}
});
nav.start();
/*var currentIndex = -1; //定义一个临时 变量存储 navg move方法触发频发，展示数据只展示一次
let _this = this;
nav.on('move',function() {
var onecuso = nav.getCursor().idx; //move 一直触发 获取 轨迹中 的下标
if(onecuso > pointNum-1)return false;
if(currentIndex !== onecuso){
currentIndex = onecuso;
_this.speed1 = (speedArr[onecuso]*3.6).toFixed(1); // 保留一位小数
}
});*/
})
)
});
},
msg() {
this.$notify.info({
title: '提示',
message: '暂无轨迹数据'
});
},
}
}
</script>
<style scoped>
.input input{
position: relative;
display: inline-block;
border-radius: 5px;
height: 20px;
margin-right: 20px;
font-size: 16px;
line-height: 32px;
width: 250px;
padding-left: 8px;
}
</style>