前言
在做基于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負責就好了。
我們會持續維護這個項目，同時也希望vue-amap能給更多開發者帶來開發效率的提高以及體驗上的舒適。
Github：vue-amap
demo完成下載地址：vue-amap_jb51.rar
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
