vue 中加入高德的定位和轨迹

参考：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-pickerv-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>

vue 中加入高德的定位和轨迹相关推荐

VUE中使用高德地图.做个轨迹添加器,为路线规划做数据
准备工作使用前准备 : 高德地图key 使用插件: vue-amap 1.npm安装vue-amap npm install vue-amap --save 2 在mai.js中引入 import ...
Vue中使用高德地图
Vue中使用高德地图定位及poi搜索,以及其他插件的使用方法 1.第一步安装 npm install vue-amap --save 2.引入vue-amap main.js import Vue f ...
vue中引用高德地图根据经纬度计算两地距离
vue中引用高德地图根据经纬度计算两地距离一.示例图: npm安装 npm install vue-amap --save 在min.js文件中引入vue-amap import VueAMap f ...
在Vue中使用高德地图
在Vue中使用高德地图一.如何在Vue中引入基础高德地图 1.步骤一:注册并登录高德地图开放平台,申请密钥 2.步骤二:安装高德地图加载器 3.封装一个自定义地图组件,并初始化地图二.根据关键词搜 ...
vue项目使用高德地图定位当前地址
vue项目使用高德地图定位当前地址一.在项目中安装vue-amap插件二.页面代码三.data数据一.在项目中安装vue-amap插件 1.最终效果 2.安装命令 npm install vu ...
vue中引入高德js
项目概述: 通过在vue中引入高德js,实现地图的加载呈现,以及在地图中实现设备坐标定位,并在设备列表点击的同时进行定位点的切换和地图视图的切换,在点击坐标点的时候可以弹出相关介绍信息. 第一步:在i ...
解决vue中绝对定位或固定定位在底部的按钮随键盘移动的问题
解决vue中绝对定位或固定定位在底部的按钮随键盘移动的问题参考文章: (1)解决vue中绝对定位或固定定位在底部的按钮随键盘移动的问题 (2)https://www.cnblogs.com/zlfP ...
Vue中使用高德地图，简单明了
一.使用步骤 1.在vue中引入高德地图的加载器 npm i @amap/amap-jsapi-loader --save 在自己的组件中去引用 <template>//这个div就是 ...
Vue中使用高德地图（vue-amap）的采坑记录小白入门
这里写目录标题写在开始 step.1 安装组件 step.2 引入组件 step.3注册高德高德开发者账号,申请KEY step.4 正式使用写在开始俗话说授人以鱼不如授人以渔,直接记录代码的话 ...

vue 中加入高德的定位和轨迹

vue 中加入高德的定位和轨迹相关推荐

最新文章

热门文章

vue 中加入高德的 定位和轨迹

vue 中加入高德的 定位和轨迹相关推荐

最新文章

热门文章

vue 中加入高德的定位和轨迹

vue 中加入高德的定位和轨迹相关推荐