vue-amap对你说hi

之前在公司也有这个需求来着，当时急着上线，就没有做这块的内容，今天正好看见了，所以赶紧整理下来，以防下次用的时候抓瞎。

vue-amap是一套基于Vue 2.0和高德地图的地图组件。
文档：https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install
GitHub：https://github.com/ElemeFE/vue-amap/

安装

推荐使用npm安装 npm install vue-amap --save

也可以使用CDN直接引入 <script src="https://unpkg.com/vue-amap/dist/index.js"></script>

使用

在main.js引入vue-amap

import Vue from 'vue';
import AMap from 'vue-amap';
import App from './App.vue';

Vue.use(AMap);
AMap.initAMapApiLoader({
  key: 'your amap key',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor']
});

new Vue({
  el: '#app',
  render: h => h(App)
})

html:

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

js初始化地图：

    // 初始化高德地图的 key 和插件
    window.VueAMap.initAMapApiLoader({
      key: 'YOUR_KEY',
      plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor']
    });

    new Vue({
      el: '#app',
      data: function(){
        return { }
      }
    });

同时还有一些基础属性，包括静态属性和动态属性，可以参照文档，

也可以用点状物、图片、圆、多边形、折线来作为遮盖物。

为了提供方便和扩展，还提供了一系列的插件供大家使用，比如：鹰眼插件、比例尺插件、工具条插件、定位插件。

下面我也做了一个小demo来作为试手。

html：

<template>
  <div class="hello">
    <div class="map-box">
      <h3 class="title">{{ msg }}</h3>
      <div class="amap-wrapper">
        <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo" bubble="false"> 
          <el-amap-marker :position="marker.position" :events="marker.events"  :draggable="marker.draggable" :url="marker.url"></el-amap-marker>
        </el-amap>
      </div>
      <div class="mcover" v-if="mcover" @click="isShow">
        <div class="mcover-box">
          <div class="mcover-title">定位到的位置是</div>
          <span>{{marker.position}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

js：

export default {
  name: "HelloWorld",
  data() {
    return {
      mcover: false, // 蒙层是否显示
      msg: "Amber的地址",
      zoom: 14,
      center: [121.499038, 31.235741],
      marker: {
        position: [121.499038, 31.235741],
        url: "../img/qrcode.jpg",
        bounds: [[121.499038, 31.235741], [122.499038, 31.235741]],
        events: {
          click: () => {
            this.clickthis();
          },
          dragend: e => {
            this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
          }
        },
        visible: true,
        draggable: false,
        template: "<span>1</span>"
      }
    };
  },
  methods: {
    clickthis() {
      let me = this;
      me.mcover = true;
    },
    isShow() {
      this.mcover = false;
    }
  }
};

css：

* {
  margin: 0;
  padding: 0;
}
.title {
  color: azure;
  text-align: center;
  padding: 30px 0;
}
.map-box {
  background-color: dimgrey;
  width: 98%;
  height: 800px;
  padding: 1%;
}
.amap-wrapper {
  width: 100%;
  height: 500px;
}
.mcover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  z-index: 10;
}
.mcover-box {
  background-color: white;
  width: 30%;
  height: 300px;
  border-radius: 8px;
  position: absolute;
  left: 50%;
  margin-left: -15%;
  top: 50%;
  transform: translateY(-50%);
}
.mcover-title {
  padding: 15px 10px;
  font-size: 14px;
  font-weight: bold;
  background-color: antiquewhite;
  border-radius: 8px 8px 0 0;
  color: brown;
}
.mcover-box span {
  display: inline-block;
  width: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: -25%;
}