学习笔记——vue中使用高德地图中轨迹回放时,小车移动速度过快问题
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
问题:在vue中,使用高德地图中的轨迹回放,来展现小车的移动轨迹。但是小车移动速度过快,修改moveAlong()中的参数也没用。
首先,需要进入高德开放平台,注册并登录控制台。在应用管理=>我的应用中创建一个应用。在新创建的一个应用中添加一个key。
1.引入高德地图:
1.npm下载
npm i vue-amap --save
2.main.js导入
import VueAMap from 'vue-amap'
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
// 高德key
key: '你的key',
// 插件集合 (插件按需引入)
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView',
'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.MarkerClusterer', 'AMap.MoveAnimation'],
v: '1.4.15',
uiVersion: '1.0.11'
})
或者
在vue项目中public文件夹下的index.html文件中
<script type="text/javascript" language="javascript" src="https://webapi.amap.com/maps?v=1.4.4&key=你的key&plugin=AMap.ControlBar,AMap.ToolBar,AMap.MoveAnimation"></script>
2.使用高德地图:
在vue组件中直接使用
// 初始化地图
initMap() {
this.map = new AMap.Map('container',{
resizeEnable: true,
center: this.centerArr,
zoom: 18
})
AMap.plugin('AMap.MoveAnimation', function(){});
this.marker = new AMap.Marker({
map: this.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.load2DMap()
},
// 绘制运动轨迹
load2DMap() {
this.lineArr = [[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]];
// 绘制轨迹
var polyline = new AMap.Polyline({
map: this.map,
path: this.lineArr,
showDir:true,
strokeColor: "#28F", //线颜色
strokeWeight: 6, //线宽
});
// 将折线添加至地图实例
var passedPolyline = new AMap.Polyline({
map: this.map,
strokeColor: "#AF5", //线颜色
strokeWeight: 6, //线宽
});
this.marker.on('moving',e => {
passedPolyline.setPath(e.passedPath);
});
this.map.setFitView();
},
// 退出地图
exitMap() {
this.isShowMap = false
},
// 开始动画
startAnimation() {
let that = this.speed
this.marker.moveAlong(this.lineArr, that)
},
// 暂停动画
pauseAnimation() { this.marker.pauseMove(); },
// 继续动画
resumeAnimation() { this.marker.resumeMove(); },
出现以上问题的原因:在于高德地图的版本问题:
v1.4.4或者v1.4.15都可以让小车按指定速度运行。但是最新的v2.0会使小车速度失效。
GitHub 加速计划 / vu / vue
80
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
9e887079
[skip ci] 2 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)