vue-amap使用案例——高德地图多组可切换点坐标

vue-amap | 基于 Vue 2.x 与高德的地图组件

//参加比赛的时的一个需求，当时时间比较紧，代码很烂，慎看

效果图

创建一个基于 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']
});

创建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,
        // 当前点坐标组数组下标
        i: 0,
        // 定义点坐标组数组
        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: {
      // 切换函数 通过对i进行增减实现点坐标组切换
      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从点坐标组数组中获取点坐标组
      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>