Vue公司的例子，基于vue2.0地图组件和GAD的地图

前言

在基于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

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。