快捷導(dǎo)航

vue基于Vue2.0和高德地圖的地圖組件實(shí)例

更新時間：2017年04月28日 09:06:40 作者：喻爭

本篇文章主要介紹了vue基于Vue2.0和高德地圖的地圖組件實(shí)例，非常具有實(shí)用價值，需要的朋友可以參考下

前言

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

那么vue-amap是如何做到的，又能給開發(fā)者帶來怎樣的便利與開發(fā)體驗(yàn)?zāi)兀课覀兙蛷囊粋€輕點(diǎn)的栗子講起。

產(chǎn)品經(jīng)理說，咱們要搞個地圖，上面給我放N個人，我要時刻知道他們的位置。

安裝

npm install vue-amap --save

引入vue-amap

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

// 引入vue-amap
import AMap from 'vue-amap';
Vue.use(AMap);

// 初始化vue-amap
AMap.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個人動起來

之前我們已經(jīng)將N個人放上去了，關(guān)鍵的時候來了，我們?nèi)绾胃碌貓D狀態(tài)呢？vue-amap支持?jǐn)?shù)據(jù)的單向綁定，直接更新本地數(shù)據(jù)狀態(tài)即可同步地圖顯示狀態(tài)。

<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]
   }
  ];

  // 模擬實(shí)時更新位置
  // 開啟一個1s的輪訓(xùn)，每個人的經(jīng)緯度都自增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的地圖應(yīng)用就完成了，有沒有覺得方便很多，我們只要維護(hù)好自己本地的數(shù)據(jù)狀態(tài)即可，將具體地圖的API，以及本地數(shù)據(jù)集和地圖狀態(tài)同步問題交給vue-amap負(fù)責(zé)就好了。

我們會持續(xù)維護(hù)這個項目，同時也希望vue-amap能給更多開發(fā)者帶來開發(fā)效率的提高以及體驗(yàn)上的舒適。

Github：vue-amap

demo完成下載地址：vue-amap_jb51.rar

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: