前言

在做基于LBS的應用中，時常會和地圖打交道，最直接的解決方案，當然是去對應的地圖官網找文檔，然后一步步來玩。對于簡單場景而言，體驗應該還好，但對于一些狀態多，變化頻繁的復雜場景而言，不僅要時刻維護本地數據狀態和地圖狀態同步，還要查找設置各種狀態的地圖API，實在是讓人頭疼的事情。
設計vue-amap的初衷，也就是為了讓開發者，在編寫地圖應用時，能從查找眾多地圖API和繁瑣的地圖狀態同步中解脫出來。

那么vue-amap是如何做到的，又能給開發者帶來怎樣的便利與開發體驗呢？我們就從一個輕點的栗子講起。

產品經理說，咱們要搞個地圖，上面給我放N個人，我要時刻知道他們的位置。

安裝

npm install vue-amap --save

引入vue-amap

vue-amap的引入方式很簡單，在入口文件中加入下面內容

// 引入vue-amapimport AMap from 'vue-amap';Vue.use(AMap);// 初始化vue-amapAMap.initAMapApiLoader({ // 申請的高德key key: 'YOUR_KEY', // 插件集合 plugin: ['']});

顯示地圖

在模版中加入vue-amap的地圖組件

<el-amap vid="amapDemo"></el-amap>

給地圖加入N個人

在模版中加入vue-amap的地圖組件

<template> <el-amap vid="amapDemo">  // 添加N個人  <el-amap-marker v-for="marker in markers" :position="marker.position">  </el-amap-marker></el-amap></template><script>export default { data() {  return {   markers: []  }; }, mounted() {  // 姑且N為2  // 這樣地圖上就添加了兩個人  this.markers = [   {   position: [121.5273285, 31.21515044]   }, {   position: [121.5273286, 31.21515045]   }  ]; }};</script>

讓N個人動起來

之前我們已經將N個人放上去了，關鍵的時候來了，我們如何更新地圖狀態呢？vue-amap支持數據的單向綁定，直接更新本地數據狀態即可同步地圖顯示狀態。

<template> <el-amap vid="amapDemo">  <el-amap-marker v-for="marker in markers" :position="marker.position">  </el-amap-marker></el-amap></template><script>export default { data() {  return {   markers: []  }; }, mounted() {  // 姑且N為2  // 為地圖添加兩個人  this.markers = [   {   position: [121.5273285, 31.21515044]   }, {   position: [121.5273286, 31.21515045]   }  ];  // 模擬實時更新位置  // 開啟一個1s的輪訓，每個人的經緯度都自增0.00001  const step = 0.00001;  setInterval(() => {   this.markers.forEach((marker) => {    marker.position = [marker.position[0] + step, marker.position[1] + step];   });  }, 1000); }};</script>

一個簡單的基于vue-amap的地圖應用就完成了，有沒有覺得方便很多，我們只要維護好自己本地的數據狀態即可，將具體地圖的API，以及本地數據集和地圖狀態同步問題交給vue-amap負責就好了。