前言
在基于LBS的应用中,我们
经常处理地图。最直接的
解决办法是,当然,绘制相应的官方
网站的官方地图,然后玩它一步一步,一个简单的场景,体验应该是好的,但在一些国家,复杂场景变化频繁,不仅保持了
本地数据和地图的状态
同步,但也
发现集各个国家的地图API,真是让人头疼。
设计VUE AMAP是使开发人员能够摆脱复杂的地图API的地图和地图应用状态同步写作时的目的。
Vue AMAP做怎么做,什么便利和发展经验可以给开发商吗我们从清淡的栗子开始。
产品经理说:让我们找一张地图,把N放在我的上面。我想知道他们的
位置。
安装 NPM安装Vue地图-
保存 AMAP Vue简介
Vue
介绍地图是简单的,和下面的内容添加到
输入文件 Vue介绍地图 / /
导入地图from'vue-amap;
vue.use(AMAP);
/ /初始化Vue地图
AMap.initAMapApiLoader({
应用高级德语键
关键词:'your_key,
设置/
插件 插件:{ }
});
显示地图
加入Vue AMAP地图
组件模板
在地图上添加n
加入Vue AMAP地图组件模板
出口
默认{
数据(){
返回{
标记:{ }
};
},
挂载(){
2暂定
此映射添加了两个
this.markers = {
{
位置:{ 121.5273285,31.21515044 }
{ }。
位置:{ 121.5273286,31.21515045 }
}
};
}
};
让n人向上移动
我们已经把N个人放在前面了,关键时刻到来了。我们如何更新地图状态Vue地图
支持数据的单向约束,并更新本地数据直接同步地图显示状态。
出口默认{
数据(){
返回{
标记:{ }
};
},
挂载(){
2暂定
添加两个map
this.markers = {
{
位置:{ 121.5273285,31.21515044 }
{ }。
位置:{ 121.5273286,31.21515045 }
}
};
实时
模拟/更新位置
打开一个1s旋转,每个经度增加0.00001。
常量
步骤= 0.00001;
((setInterval)= > {
This.markers.forEach((标记)= > {
marker.position = {标记。位置{ 0 } +步,标记位置{ 1 } +步};
});
},1000);
}
};
一种基于Vue AMAP完成简单的地图应用,并不觉得轻松了很多,只要我们保持一个良好的本地数据状态,API的地图,以及本地数据和地图的状态同步问题Vue AMAP负责好。
我们将继续保持这个项目,我们也希望更多的
开发者Vue AMAP将带来更多的发展效率和舒适体验。
GitHub:Vue
公司地图
演示完成
下载地址:vue-amap_jb51.rar
以上是本文的全部内容,希望能对您有所帮助,希望大家多多支持。