快捷導(dǎo)航

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

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

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

前言

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

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

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

安裝

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({
 // 申請(qǐng)的高德key
 key: 'YOUR_KEY',
 // 插件集合
 plugin: ['']
});

顯示地圖

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

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

給地圖加入N個(gè)人

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

<template>
 <el-amap vid="amapDemo">
  // 添加N個(gè)人
  <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
  // 這樣地圖上就添加了兩個(gè)人
  this.markers = [
   {
   position: [121.5273285, 31.21515044]
   }, {
   position: [121.5273286, 31.21515045]
   }
  ];
 }
};
</script>

讓N個(gè)人動(dòng)起來

之前我們已經(jīng)將N個(gè)人放上去了，關(guān)鍵的時(shí)候來了，我們?nèi)绾胃碌貓D狀態(tài)呢？vue-amap支持?jǐn)?shù)據(jù)的單向綁定，直接更新本地?cái)?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
  // 為地圖添加兩個(gè)人
  this.markers = [
   {
   position: [121.5273285, 31.21515044]
   }, {
   position: [121.5273286, 31.21515045]
   }
  ];

  // 模擬實(shí)時(shí)更新位置
  // 開啟一個(gè)1s的輪訓(xùn)，每個(gè)人的經(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>

一個(gè)簡單的基于vue-amap的地圖應(yīng)用就完成了，有沒有覺得方便很多，我們只要維護(hù)好自己本地的數(shù)據(jù)狀態(tài)即可，將具體地圖的API，以及本地?cái)?shù)據(jù)集和地圖狀態(tài)同步問題交給vue-amap負(fù)責(zé)就好了。

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

Github：vue-amap

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

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

您可能感興趣的文章: