vue-amap | 基于 Vue 2.x 與高德的地圖組件

//參加比賽的時的一個需求，當時時間比較緊，代碼很爛，慎看

效果圖

創(chuàng)建一個基于 webpack 模板的新項目

安裝vue-amp

npm install vue-amap --save

在項目中引入vue-amap

// 在main.js中引入vue-amap
import AMap from 'vue-amap'
Vue.use(AMap);
AMap.initAMapApiLoader({
  key: 'your amap key',  //高德地圖key
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor']
});

創(chuàng)建Map.vue 開始代碼編寫 首先是template部分

<template>
  <section>
    <div class="amap-page-container">
      // 切換圖標 分別調用lastMap()與nextMap() 未避免被簡書轉化未設置img的src屬性
      <img class="toggle-img" v-on:click="lastMap()" style="top: 50%;"/>
      <img class="toggle-img" v-on:click="nextMap()" style="top: 70%;"/>
      // 顯示當前國家
      <span class="demo-affix" style="top: 15px;">當前位于{{contry}}--點擊圖標進入城市</span>
      // 切換提示
      <span class="demo-affix" style="top: 70px;">點擊左側切換按鈕選擇國家</span>
      // 地圖主體
      <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo">
        // 遍歷當前點坐標組markers 開始標點
        <el-amap-marker v-for="marker in markers" :key="marker.mapName" :position="marker.position" :content="marker.content" :visible="true" :draggable="false"></el-amap-marker>
      </el-amap>
    </div>
  </section>
</template>

script部分

<script>
  export default {
    name: 'map',
    data() {
      return {
        // 縮放級別  
        zoom: 5,
        // 當前點坐標組數(shù)組下標
        i: 0,
        // 定義點坐標組數(shù)組
        markerGroups: [
          [
            {
              position: [113.78109,35.19799],
              content: this.getContentHtml('鄭州'),
              contry: '中國'
            },
            {
              position: [116.30621, 39.976121],
              content: this.getContentHtml('北京'),
              contry: '中國'
            },
            {
              position: [108.909426,34.513185],
              content: this.getContentHtml('西安'),
              contry: '中國'
            },
            {
              position: [118.919945,32.374795],
              content: this.getContentHtml('南京'),
              contry: '中國'
            }
          ],
          [
            {
              position: [71.45065999999997,51.18287],
              content: this.getContentHtml('阿斯塔納'),
              contry: '哈薩克斯坦'
            },
            {
              position: [76.93102999999996, 43.27214],
              content: this.getContentHtml('阿拉木圖'),
              contry: '哈薩克斯坦'
            }
          ]
        ],
      };
    },
    methods: {
      // 切換函數(shù) 通過對i進行增減實現(xiàn)點坐標組切換
      nextMap() {
        if (this.markerGroups.length > this.i + 1) {
          this.i += 1;
        }else {
          this.i = 0;
        }
      },
      lastMap(){
        if (this.i <1){
          this.i = this.markerGroups.length - 1;
        }else {
          this.i -= 1;
        }
      },

      },
      getContentHtml(content) {
        // 未避免被簡書轉化未設置img的src屬性
        return '<p><img width="50px" height="50px" style="margin: -25px 0 0 -25px;"></p><p style="font-size: 20px;margin-left:  -25px;color: yellow;background-color: red;text-align: center;">'+ content + '</p>';
      }
    },
    computed: {
      // 點坐標組getter方法 通過i從點坐標組數(shù)組中獲取點坐標組
      markers: function () {
        // `this` points to the vm instance
        return this.markerGroups[this.i];
      },
     // 當前地圖中心getter方法
      center: function () {
        return this.markerGroups[this.i][0].position;
      },
     // 當前國家getter方法
      contry: function () {
        return this.markerGroups[this.i][0].contry;
      }
    }
  };
</script>    

style 部分

<style>
  .demo-affix{
    background-color: #f1c40f;
    padding: 10px 20px;
    color: white;
    position: absolute;
    z-index: 999;
  }
  //地圖為異步加載妈倔，需要為容器設置高度，否則地圖無法顯示
  .amap-page-container{
    height: 100vh;
  }
  .toggle-img{
    width: 80px; height:80px; position: absolute;left: 5px;color: red; z-index: 999;font-size: 40px;
  }
</style>