vue项目 vue-amap高德地图api回放轨迹源码
此项目在vue中完成,所以需要安装vue-amap,地址在这vue-amap文档,
官方git手册:
https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install
文档步骤比较详细,小编就不多说了,
第二点文档也有提到,对于定制化较高的项目中,amap已经不能满足开发者所需求,所以需要基于高德地图的sdk来完成。
所需要的api一定要在
lazyAMapApiLoaderInstance
下完成。
废话不多说直接上源码html部分省略:
/全局引入 main.js中配置
import VueAMap from 'vue-amap';
import { lazyAMapApiLoaderInstance } from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: 'YOUR_KEY',
plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType',...],
uiVersion: '1.0' // ui库版本,不配置不加载,
v: '1.4.4'
});
//vue文件调用
import { AMapManager, AmapMarker, lazyAMapApiLoaderInstance } from "vue-amap";
let amapManager = new AMapManager();
export default {
data() {
path: [
[116.478935, 39.997761],
[116.478939, 39.997825],
[116.478912, 39.998549],
[116.478912, 39.998549],
[116.478998, 39.998555],
[116.478998, 39.998555],
[116.479282, 39.99856],
[116.479658, 39.998528],
[116.480151, 39.998453],
[116.480784, 39.998302],
[116.480784, 39.998302],
[116.481149, 39.998184],
[116.481573, 39.997997],
[116.481863, 39.997846],
[116.482072, 39.997718],
[116.482362, 39.997718],
[116.483633, 39.998935],
[116.48367, 39.998968],
[116.484648, 39.999861],
],
map: null,
marker:null,
polyline :null,
},
methods: {
//点击按钮播放
play(){
this.marker.moveAlong(this.path,200);
},
//点击暂停
pause(){
this.marker.pauseMove();
},
//继续播放
resumeAnimation() {
this.marker.resumeMove();
},
//此暂停 再次点击播放 从头开始
stopAnimation() {
this.marker.stopMove();
},
path(){
lazyAMapApiLoaderInstance.load().then(() => {
this.map = new AMap.Map('amapContainer', {
this.map = amapManager.getMap();
this.marker = new AMap.Marker({
map: that.map,
position: [116.478935, 39.997761],
icon: "https://webapi.amap.com/images/car.png",
offset: new AMap.Pixel(-26, -13),
autoRotation: true,
angle: -90,
});
// 绘制轨迹
this.polyline = new AMap.Polyline({
map: that.map,
path: that.path,
showDir: true,
strokeColor: "#28F", //线颜色
strokeWeight: 6, //线宽
strokeOpacity: 1, //线透明度
strokeStyle: "solid", //线样式
});
//绘制路过了的轨迹
var passedPath = new AMap.Polyline({
map: this.map,
strokeColor: "#AF5", //线颜色-绿色
//path: this.lineArr,
// strokeOpacity: 1, //线透明度
strokeWeight: 6 //线宽
// strokeStyle: "solid" //线样式
});
//经过轨迹的更新
this.marker.on("moving", (e) => {
passedPolyline.setPath(this.passedPath);
});
// 自动适配视图
this.map.setFitView();
});
});
}
},
mounted(){
this.path()
}
}
相关文章